Ant Design Vue 如何修改 a-table 的 header ？

Question

Ant Design Vue 如何修改 a-table 的 header ？

比如我希望可以实现鼠标悬停在某个列名上，可以跳出一个 a-tooltip 来提示一些内容

我知道列值可以通过 <template v-if="column.key === 'clip_source'"> 定制。但是我不知道怎么插槽到列头上？

chatgpt 给了我下面的代码，用的是 <template v-slot:customHeader="{ column }">，但是没有效果

<template>
    <a-table :columns="columns" :data-source="data">
      <template v-slot:customHeader="{ column }">
        <span>
          {{ column.title }} 哈哈
          <a-tooltip>
            <template #title>{{ column.description }}</template>
            <a-icon type="question-circle" style="color: #1890ff" />
          </a-tooltip>
        </span>
      </template>
    </a-table>
  </template>
  
  <script>
  import { Table, Tooltip } from 'ant-design-vue';
  
  export default {
    components: {
      'a-table': Table,
      'a-tooltip': Tooltip
    },
    data() {
      return {
        data: [
          { key: '1', name: 'John Brown', description: 'Description for John Brown' },
          { key: '2', name: 'Jim Green', description: 'Description for Jim Green' },
          { key: '3', name: 'Joe Black', description: 'Description for Joe Black' },
        ],
        columns: [
          { title: 'Name', dataIndex: 'name', key: 'name', description: 'This is the name column' },
          { title: 'Age', dataIndex: 'age', key: 'age', description: 'This is the age column' },
        ]
      };
    }
  };
  </script>
  

---

我的相关版本信息如下：

{
  "name": "tracking-king",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^7.0.1",
    "ant-design-vue": "^3.2.20",
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "echarts": "^5.4.2",
    "element-plus": "^2.3.4",
    "vue": "^3.2.13",
    "vue-json-viewer": "^3.0.4",
    "vue-request": "^2.0.4",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/multi-word-component-names": 0,
      "vue/no-unused-components": "off",
      "no-unused-vars": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Answer 1

AntD Vue 3x 的 table 有一个 #headerCell 的插槽。 👉 表格 Table - Ant Design Vue

Table 废弃了 column.slots, 新增 v-slot:bodyCell、v-slot:headerCell，自定义单元格，新增 column.customFilterDropdown v-slot:customFilterDropdown，自定义筛选菜单，新增了 v-slot:customFilterIcon 自定义筛选按钮，但 column.slots 还可用，我们会在下一个大版本时移除。