Vue3：elementplus表格header-cell-class-name回调方法使用

<template>
  <el-table
    :data="tableData"
    :header-cell-class-name="tableHeaderClassName"
  >
    <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="address"
      label="地址"
    ></el-table-column>
  </el-table>
</template>
 
<script>
import { defineComponent } from 'vue';
 
export default defineComponent({
  setup() {
    const tableData = [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      // ...更多数据
    ];
 
    // 表格头部单元格的 className 的回调方法
    const tableHeaderClassName = ({ column, columnIndex }) => {
      if (columnIndex === 0) {
        return 'first-column-header';
      }
    };
 
    return { tableData, tableHeaderClassName };
  }
});
</script>
 
<style>
.first-column-header {
  font-weight: bold;
  color: #00f;
}
</style>

在这个例子中，我们定义了一个Vue 3组件，它使用了Element Plus的el-table和el-table-column组件来展示一个表格。我们通过header-cell-class-name属性来自定义表格头部单元格的类名。我们定义了一个方法tableHeaderClassName，它根据列索引来判断是否为第一列，如果是，则返回自定义的类名first-column-header。这个类名在<style>标签中定义，用于改变第一列头部的样式。