【Vue】在el-table的el-table-column中，如何控制单行、单列、以及根据内容单独设置样式。例如：修改文字颜色、背景颜色_vue el-table-column

用cell-style表属性来实现。在官网中是这样表述这个属性的。

 

 在el-table中用v-bind绑定此属性。（v-bind的简写是：）

      <el-table
        :data="options"
        :cell-style="cell"
      >
        <el-table-column prop="id" label="id" width="50px"></el-table-column>
        <el-table-column prop="label" label="时间" width="200px"></el-table-column>
      </el-table>

data中的options数据为：

 data() {
    return {
      options: [
        { id: 1, label: "inner" },
        { id: 2, label: "webapi" },
        { id: 3, label: "inner-cron" }
      ],
    };
  },

此时页面显示为：

 

 

在methods中声明cellStyle方法。让我们打印出各个参数看一下代表了什么。

    cell({ row, column, rowIndex, columnIndex }) {
      console.log(row);
      console.log(column);
      console.log(rowIndex);
      console.log(columnIndex);
    },

控制台打印如下： 

 

 其实很好理解，row是行，控制台第一行打印的是数组中第一个对象。column是列，是el-table-column。rowIndex是行的索引，columnIndex是列索引。

如果我们想更改第一行的字体颜色是绿色。可以这么写：

    cell({ row, column, rowIndex, columnIndex }) {
      if(rowIndex === 0){
        return "color:green"
      }
    },

页面效果为：

如果想要第一列的背景颜色是红色。那么：

    cell({ row, column, rowIndex, columnIndex }) {
      if(columnIndex === 0){
        return "background-color : red"
      }
      if(rowIndex === 0){
        return "color:green"
      }
    },

 页面显示为：

 若想要label为inner-cron的字体加粗。那么：

    cell({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "background-color : red";
      }
      if (rowIndex === 0) {
        return "color:green";
      }
      if (row.label === "inner-cron") {
        return "font-weight : bold";
      }
    },

页面显示为：