elmentUI Table表头自定义样式

两种方式

第一种：
1、首先在html中加入
:header-cell-style="tableHeaderColor 改变颜色
:header-cell-class-name="HeaderMust" 自定义表头的样式

    <el-table :data="tableData" style="width: 100%" border :header-cell-style="tableHeaderColor" :header-cell-class-name="HeaderMust">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

2、然后在methods中给固定表头列添加自定义样式

  methods: {
    //改变table表头的颜色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #fafafa; color: rgba(0,0,0,.85);"
      }
    },
    //方法一:给table头部加星号
    HeaderMust(obj) {
      // console.log(obj);
      if (obj.columnIndex == 1 || obj.columnIndex == 2) {
        return 'HeaderMust';
      }
    },
  },

3、最后加样式

<style lang="less">
.page {
  table th.HeaderMust div:before {
    content: "*";
    color: #ff1818;
    margin-right: 5px;
  }
}
</style>

注：一定不要在scoped中写样式，不然没有效果

第二种

1、首先给html中的el-table-column绑定一个属性值

2、然后在methods中给固定表头列添加自定义样式 效果图：