el-table如何使用:header-cell-style方法写一个函数，函数的内容让表头居中

在Element UI的el-table组件中，`header-cell-style`是一个用于自定义表头单元格样式的属性，你可以通过它动态地给每个单元格添加样式。如果你想让表头内容居中显示，你可以创建一个返回CSS对象的函数，这个函数会在每个单元格渲染时执行。下面是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="Name"
      header-cell-style="customHeaderCellStyle"
    />
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  methods: {
    customHeaderCellStyle({ column, rowIndex }) {
      return {
        // 使用 justify-content 属性设置文本居中对齐
        'text-align': 'center',
        // 如果需要，还可以设置其他如 font-size、color 等样式
      };
    }
  },
  data() {
    return {
      tableData: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
        // ...
      ]
    };
  }
};
</script>

在这个例子中，`customHeaderCellStyle`函数接收两个参数：当前单元格的列对象`column`和行索引`rowIndex`。它返回一个CSS对象，设置了`text-align`属性为`center`，使得表头文字水平居中。