el-table-column 動態改變單元格樣式

功能：根據數據里的值，判斷當前字符串是否包含在數組里面，如果包含的話改變當前單元格顏色

1.初步嘗試過插槽的方式，但是對於數組里面的字符串出現重現的情況，導致有的單元格被忽略掉了，而且這種方式只可以改變字體顏色不能改變背景色，數組例如：[Rate,signRate,]里面都包含了Rate

 

 2.嘗試使用el-table里面的：cell-class-name

 

<el-table :data="gridData" border style="width: 100%" max-height="350" :header-cell-style="{background:'rgb(244, 244, 245)',color:'#606266'}" :cell-class-name="rowClass">

 

row：里面是所有字段

column：是當前tb

rowIndex:行數

columnIndex:列數

 

注意：return 的是style里面的class名稱，不要直接返回樣式

 不能用indexOf.--之前看了一篇文章說不能這個方法里面不能用for,后來問了大佬說沒問題，數組循環要使用i++的方式

methods: {
    rowClass({row, column, rowIndex, columnIndex}) {
        if(row.columnList!== null) {
            for (let i = 0; i < row.columnList.length; i++) {
                if (row.columnList[i] === column.property) {
                    return 'bgColor';
                }
            }
        }
    },
}

 

 

不要加  scoped  限制，不然就不會生效

<style lang="scss">
    .bgColor {
        background: #F56C6C;
        color:white
    }
</style>