vue3 ElementPlus el-table根据表头内容,修改表头背景色

修改table表头背景用到的方法是ElementPlus自带的方法:header-cell-style

使用代码教程:

      <el-table
        :header-cell-style="tableHeaderColor"
        border
        :data="dataList"
      >
     <!-- header-cell-style修改table表头样式的,tableHeaderColor是写的回调函数,在回调函数里面修改表头样式 -->
      </el-table>

回调函数使用:

// 根据data返回的每个单元格的数据判断,再修改单个表头单元格的颜色
function tableHeaderColor(data) {
  if (data.column.property == "equip") {
    return { background: "#a0cfff", color: "#000", textAlign: "center" };
  } else if (
    data.column.property == "value1" ||
    data.column.property == "value2" ||
    data.column.property == "name1"
  ) {
    return { color: "#000", textAlign: "center" };
  } else if (data.column.property == "value3") {
    return { color: "#117ecc", textAlign: "center" };
  }
}

修改效果图: