【前端】elementUI表格根据状态显示不同的字体颜色

冷不防 2023-10-10 17:51 70阅读 0赞

elementUI表格根据状态显示不同的字体颜色

[elementUI 官网][elementUI]：https://element.eleme.cn/\#/zh-CN

[cell-style：单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。][cell-style_ style _ Object _ Style]

实现效果：  
![在这里插入图片描述][f0fc22c03b3b4b4bbe4ded1c06087f87.png]  
实现步骤：

el-table标签中增加一个方法回调，:cell-style=“cellStyle”。

![在这里插入图片描述][7c1e393b25e84d7abdaf5bf10c3c5be9.png]在方法中添加：  
![在这里插入图片描述][0e9efe2fb81b403583056db390c9d9c0.png]

// 表格中单元格的字体颜色设置
    /***
     * row为某一行的除操作外的全部数据
     * column为某一列的属性
     * rowIndex为某一行（从0开始数起）
     * columnIndex为某一列（从0开始数起）
     */
    cellStyle({
          row, column, rowIndex, columnIndex }) {
        
        // 根据状态列显示字体颜色
        if (row.isSync === 0) {
        
            return "color: #0CB618";
        } else {
        
            return "";
        }
    },

本文完结！

[elementUI]: https://element.eleme.cn/#/zh-CN
[cell-style_ style _ Object _ Style]: https://element.eleme.cn/#/zh-CN/component/table
[f0fc22c03b3b4b4bbe4ded1c06087f87.png]: https://img-blog.csdnimg.cn/f0fc22c03b3b4b4bbe4ded1c06087f87.png
[7c1e393b25e84d7abdaf5bf10c3c5be9.png]: https://img-blog.csdnimg.cn/7c1e393b25e84d7abdaf5bf10c3c5be9.png
[0e9efe2fb81b403583056db390c9d9c0.png]: https://img-blog.csdnimg.cn/0e9efe2fb81b403583056db390c9d9c0.png