elementplus el-table 修改指定列背景色

实现效果：

1.通过el-table的 header-cell-style、cell-style 设置指定列背景色

 <el-table
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
    >
      <el-table-column type="selection" width="40" fixed />
      <el-table-column type="index" label="序号" width="60" fixed />
      <el-table-column prop="subUsersID" label="用户ID" show-overflow-tooltip />
      <el-table-column prop="subUsersName" label="账号" show-overflow-tooltip />
      <el-table-column
        prop="subUsersTrueName"
        label="昵称"
        show-overflow-tooltip
      />
      <el-table-column prop="remark" label="描述" show-overflow-tooltip />
    </el-table>复制

2. 表头样式通过 property 判断，单元格样式通过 columnIndex 下标设置。

<script setup>
 
...
 
const headerCellStyle = (data) => {
  if (
    data.column.property == "subUsersName"
  ) {
    return { "background-color": "#A6DB8B !important" };
  }
};
 
const cellStyle = (data) => {
  if (data.columnIndex == 3) {
    return { "background-color": "#A6DB8B !important" };
  }
};
 
</script>复制