修改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" };
  }
}

修改效果图:

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐