目錄

一 、需求

二、方法之cell-style

1 、cell-style

2 、表格綁定cell-style屬性

3 、數(shù)據(jù)操作

三 、方法之el-tag

1 、el-table-column

2、方法eachColor(){}

---

一 、需求

根據(jù)列表列值的不同顯示不同顏色

二、方法之cell-style

1 、cell-style

cell-style

單元格的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有單元格設(shè)置一樣的 Style。

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

• row:當(dāng)前行
• columnIndex:?列下標(biāo)

2 、表格綁定cell-style屬性

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

3 、數(shù)據(jù)操作

const cellStyle= ({ row, column, rowIndex, columnIndex })=> {
  // 狀態(tài)列字體顏色
  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";
      }
      ...
    },

有用請點(diǎn)贊，養(yǎng)成良好習(xí)慣！

疑問、交流、鼓勵請留言！