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;
    }