el-table表格样式设置方法 :cell-class-name
需求:依据筛选条件,动态渲染table
① 表格字段是不固定的,其中间的字段是依据用户选取的关键字来展示的
② 根据后台返回数据状态来显示字段对应的图标
1、依据字段状态显示图标
<template>
<!-- 搜索结果表 -->
<div class="rt_wrapper" ref="crWrapper">
<el-table
border
v-loading="loading"
class="table-fixed"
:height="tableHeight"
:data="tableData"
:row-style="{height:0+'px'}"
:cell-class-name="cellClassName"
:header-cell-style="{'backgroundColor':'#17B3A3', 'color': '#fff'}"
@sort-change="changeSort"
@selection-change="handleSelectionChange"
:key="tableKey">
<el-table-column
type="selection"
width="55"
align="center"
v-if="isShowSelection && tableData.length > 0">
</el-table-column>
<el-table-column v-for="(item, index) in theadParams"
:class="isNaN(tableParams[index]) ? '' : keyWordStatus[tableParams[index]]"
:key="index"
:label="item"
:sortable="sortable[index]"
:prop="tableParams[index]"
:fixed="needFixedColumn[index] == undefined ? false : needFixedColumn[index]"
align="center">
</el-table-column>
<el-table-column label="操作" align="center" v-if="operateData.length">
<template slot-scope="scope">
<el-button type="text" v-for="(item, index) in operateData[scope.$index]"
:key="'an_' + index"
:data-text="item"
@click="operateBtn(scope.row, $event)">{{item}}</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
设置表格样式可以使用 :cell-class-name="cellClassName",cellClassName代码如下:
(注:cellClassName中不能使用循环)
methods: { // 为关键字的三种状态:匹配成功、未找到关键字、参考值不一致设置颜色 cellClassName({ row, column, rowIndex, columnIndex }) { if(this.isSetSpecialColor) { // 这个是flag字段,标识是否显示特殊颜色,true,false if(column.property != "filetypeName" && column.property != "fileName" && column.property != "updateTime") { // filetypeName...这些都是表格字段 let columnProperty = this.tableData[rowIndex][column.property]; if(columnProperty == 0) { return 'greenClass'; // class名称 } else if(columnProperty == 1) { return 'orangeClass'; // class名称 } else if(columnProperty == 2) { return 'redClass'; // class名称 } else if(columnProperty == '' || columnProperty == null) { return 'emptyClass'; // class名称 } } } }, }
图标样式如下:
.orangeClass, .greenClass, .redClass { position: relative; font-size: 0; &::before { content: '!'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; line-height: 16px; font-size: 14px; font-weight: bold; text-align: center; color: orange; border: 2px solid orange; border-radius: 50%; } } .greenClass { &::before { content: '√'; color: green; border: 2px solid green; } } .redClass { &::before { content: '×'; line-height: 14px; color: red; border: 2px solid red; } } .emptyClass { background-color: #f8f8f8; }