Ant Design of Vue 表格customHeaderRow 设置头部行属性

Ant Design of Vue (简称ADoV) 中的表格组件 Table 提供了 `customHeaderRow` 属性，这是一个特殊的功能，用于自定义表头行的行为。当你设置 `customHeaderRow` 时，你可以传递一个函数，这个函数会在每次渲染时返回一个新的表头行元素。这可以让你动态地控制表头的内容、样式或者包含复杂的交互。

例如，你可以这样做：

<template>
  <a-table :columns="columns" :data-source="dataSource" :custom-header-row="customHeaderRow">
    <!-- ... -->
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [...], // 表列配置
      dataSource: [...], // 数据源
    };
  },
  methods: {
    customHeaderRow({ column, rowIndex }) {
      // 根据 column 或者 rowIndex 返回自定义的表头行内容
      // 比如你想根据某一列的数据变化动态显示不同的文字
      const headerContent = this.getColumnData(column.key);
      return { children: [headerContent] }; // 返回一个包含自定义内容的对象
    },
    getColumnData(key) {
      // 这里可以根据 key 获取并处理数据
      // 可能会返回 HTML、ReactElement 等
    }
  }
};
</script>