element plus table, cell color, border settings

first look at the effect
insert image description here

:cell-style="cellStyle" set cell color, border, return value must be an object containing

<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>

css configuration

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

or

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

Guess you like

Origin blog.csdn.net/qq_44871531/article/details/128882039