element-plus 字体变色之cell-style

目录

一 、需求

二、方法之cell-style

1 、cell-style

2 、表格绑定cell-style属性

3 、数据操作

三 、方法之el-tag

1 、el-table-column

2、方法eachColor(){}

---

一 、需求

根据列表列值的不同显示不同颜色

二、方法之cell-style

1 、cell-style

cell-style

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

Function({row, column, rowIndex, columnIndex})/Object

• row:当前行
• columnIndex: 列下标

2 、表格绑定cell-style属性

        <el-table
          :data="tableData"
          :row-style="rowState"
          :cell-style="cellStyle"
          style="width: 100%"
        >

3 、数据操作

const cellStyle= ({ row, column, rowIndex, columnIndex })=> {
  // 状态列字体颜色
  if (row.level >2 && columnIndex === 8) {
        return {'color': 'red'}; //方法1
        return "color: #FF0000"; //方法2
    }
}

三 、方法之el-tag

1 、el-table-column

    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
          <el-tag :type="eachColor(scope.row.level)">{{
            scope.row.level
          }}</el-tag>
        </el-popover>
      </template>
    </el-table-column>

2、方法eachColor(){}

    eachColor(level) {
      if (level == "5") {
        return "danger";
      }
      if (level == "4") {
        return "warning";
      }
      if (level == "3") {
        return "info";
      }
      ...
    },

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！