实现 element-ui 的 el-table 单元格自定义样式

微wx笑 2022-03-14【前端开发】455 5 0关键字： element-ui el-table

有些时候我们需要根据条件，为特定的单元格指定自定义格式，以突出显示，element-ui 的 el-table 要怎么实现呢？

根据官方文档，我们需要使用：cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex})/ObjectE55无知

E55无知

相关代码：E55无知

el-table 添加 :cell-style="handleCellStyle" 单元格的 style 的回调方法E55无知

<el-table
    :data="tableData"
    stripe 
    border 
    style="width: 100%"
    :header-cell-style="{background:'#70b6ff',color:'#FFF',fontSize:'16px'}"
     :cell-style="handleCellStyle">
    <el-table-column
      prop="name"
      label="参赛人员">
    </el-table-column>
    <el-table-column
      prop="my_stock"
      label="自选股">
    </el-table-column>
    <el-table-column
      prop="work_stock"
      label="作业股">
    </el-table-column>
    <el-table-column
      prop="work_date"
      label="作业股发布时间">
    </el-table-column>
    <el-table-column
      prop="work_author"
      label="作业股作者">
    </el-table-column>
  </el-table>

methods 中添加处理程序 handleCellStyle，注意参数的写法，是需要带花括号的！E55无知

如果你不想使用花括号的形式，那么只需要指定一个参数，比如：handleCellStyle(cell)，那么cell的属性就有 row, column, rowIndex, columnIndexE55无知

 methods: {
        handleCellStyle({row, column, rowIndex, columnIndex}){
          //console.log("handleCellStyle");
          //console.log(row, column, rowIndex, columnIndex);
          if (columnIndex == 1 || columnIndex == 2){
             //console.log(cell.row);
            var count = 0;
            for(var i=0; i<this.tableData.length; i++){
              dr = this.tableData[i];
              if (columnIndex == 1 && (dr.my_stock == row.my_stock || dr.work_stock == row.my_stock)){
                 count++;
              }
              if (columnIndex == 2 && (dr.work_stock == row.work_stock || dr.my_stock == row.work_stock)){
                 count++;
              }
            }
            if (count == 2){
              return "color:white;background:#194a6e; font-weight: bold; font-size: 14px;"; 
            }
            if (count == 3){
              return "color:red;background:#66bfbf; font-weight: bold; font-size: 14px;"; 
            }
            if (count > 3){
              return "color:red;background:#00bfbf; font-weight: bold; font-size: 14px;"; 
            }
          }
        }
     }