element plus 表格,单元格颜色,边框设置_elementplus el-select边框颜色修改

先看效果

:cell-style="cellStyle"设置单元格颜色,边框,返回值一定是个对象包含

<el-table
        border
        v-loading="loading"
        :data="items"
        :cell-style="cellStyle"
        style="width: 100%; max-height: 600px; white-space: nowrap"
        :default-sort="{ prop: 'fareaid', order: 'ascending' }"
      ></el-table>
1
2
3
4
5
6
7
8

css配置

// 单元格边框颜色
const cellStyle = ({ column }) => {
  if (
    ["填报工时", "任务进度(%)", "工作内容", "产出文档提交情况"].includes(
      column.label
    )
  ) {
    return {
      borderTop: "1px solid #007bff",
      borderBottom: "1px solid #007bff"
    };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13

或者

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  // 状态列字体颜色
  if (columnIndex === 0 && row.fused) {
    return { backgroundColor: "#409eff" };
  }
};
1
2
3
4
5
6