前端 - 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 还可用，我们会在下一个大版本时移除。