antd 合并表格的最后一列,且增加点击事件
实现:antd(版本1.7.8) + vue
实现如下,点击 导出 导出该表格为excel
table的columns里最后一列的操作这样写:
在customRender里写合并最后一列的方法:
判断index等于0,也就是第一行,进行行的合并,并且返回这一行的内容,是一个导出的链接,方法是exprotInterfaceData
别的行返回的rowSpan是0
导出 这个链接如果写成child: <a>导出</a>,然后加点击事件,会发现点击不生效
如果没有customCell里的样式,会发现表格的最后一行里多出了一条线,加了之后就没有了
另外在操作的上一列也加了customCell,增加了右边框,不然表格的“性能测试结果-99RT”这一列,除了第一行有右边框,别的行都没有
{ title: '性能测试结果-99RT', dataIndex: 'statistics', key: 'statistics', width: '9%', scopedSlots: { customRender: 'statistics' }, align: 'center', customCell: (text, row, index) => { return { style: { 'border-right' : index !== 0 ? '1px solid #e8e8e8' : undefined } } } }, { title: '操作', key: 'action', width: '7%', align: 'center', customRender: (text, row, index) => { var child = this.$createElement('a', { domProps: { innerHTML: '导出' }, on: { click: () => { this.exportInterfaceData() } } }) const obj = { children: child, attrs: {}, } if (index === 0) { obj.attrs.rowSpan = this.interfacedata.length } else { obj.attrs.rowSpan = 0 } return obj }, customCell: (text, row, index) => { return { style: { 'border-bottom' : index !== 0 ? 'none' : undefined } } } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)