Ant Design Vue 如何修改 a-table 的 header ?-灵析社区

米斯达

Ant Design Vue 如何修改 a-table 的 header ? ![图片.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/bb819d81f8d68ad645a492d41f08498a.png) 比如我希望可以实现鼠标悬停在某个列名上,可以跳出一个 a-tooltip 来提示一些内容 我知道列值可以通过 `` 定制。但是我不知道怎么插槽到列头上? chatgpt 给了我下面的代码,用的是 ``,但是没有效果 {{ column.title }} 哈哈 {{ column.description }} 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' }, ] }; } }; ![图片.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/233b69031c299359e0400bc47daa9a77.png) * * * 我的相关版本信息如下: { "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" ] }

阅读量:165

点赞量:0

问AI
"AntD Vue 3x" 的 "table" 有一个 "#headerCell" 的插槽。 👉 "表格 Table - Ant Design Vue" (https://link.segmentfault.com/?enc=c47NAxUv0Hx42XRGtSLCnA%3D%3D.FQltqY8cnLJQTBBW6beE%2FFcUjQZeVx%2BeoMrtkKjxj2JqOH3QbNxTRfbrXqHVC57DU0uHHO61V%2B8FBG2jPnT61%2BgI8iRnhtpJ%2Bb3JgBzO9zzMnmto4A%2FY7SXM%2F5LrP3ag) «Table 废弃了 "column.slots", 新增 "v-slot:bodyCell"、"v-slot:headerCell",自定义单元格,新增 "column.customFilterDropdown" "v-slot:customFilterDropdown",自定义筛选菜单,新增了 "v-slot:customFilterIcon" 自定义筛选按钮,但 "column.slots" 还可用,我们会在下一个大版本时移除。» "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/19a525b0c715300b2ac374a89ceae4c1.png)