1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Antd Vue table合并行表格

Antd Vue table合并行表格

时间:2022-07-21 20:18:31

相关推荐

Antd Vue table合并行表格

前言: 没搜到有合并行 全部都是合并列(写的还很复杂,大家有需要合并列的可以翻我前几篇 里边有封装好的方法 拿到方法 直接调用),然后就自己去看文档(虽然文档也是合并行和列放到一个demo里看着很费劲),废话不说 先上效果图:

效果在左下角

因为已知位置信息 (最后一行的前三列合并)

所以 合并第几行的数据写成data绑定的 列直接固定死就OK了

表格数据 dom结构 正常写 主要就是columns的配置

下边是代码:

参数说明:this.tableData就是表格绑定的data数据

columns: [{title: '指标位置',align: 'center',width: 100,dataIndex: 'indicatorPosition',ellipsis: true,// 参数书名: text是当前某个表格的值 , 每一行的数据, 行的下标customRender: (text, row, index) => {// 如果不是最后一行 就正常展示值if (index < this.tableData.length - 1) {return text}// 否则就展示汇总 并且合并三个 为什么是三个呢 上边有说 已知需要占据前三行(自己定)return {children: '汇总',attrs: {colSpan: 3,},}},},{title: '指标名称',align: 'center',width: 120,dataIndex: 'indicatorName',customRender: (text, row, index) => {// 如果不是最后一行 就正常展示值if (index < this.tableData.length - 1) {return text}// 如果是最后一行 就把表格取消 让他去合并表格return {attrs: {colSpan: 0,},}},},{title: '指标类型',align: 'center',width: 120,dataIndex: 'indicatorType',customRender: (text, row, index) => {// 如果不是最后一行 就正常展示值if (index < this.tableData.length - 1) {return text}// 如果是最后一行 就把表格取消 让他去合并表格return {attrs: {colSpan: 0,},}},},{title: '1月',align: 'center',width: 100,dataIndex: 'january',scopedSlots: {customRender: 'januaryFormat',},},{title: '2月',align: 'center',width: 100,dataIndex: 'february',scopedSlots: {customRender: 'februaryFormat',},},{title: '3月',align: 'center',width: 100,dataIndex: 'march',scopedSlots: {customRender: 'marchFormat',},},{title: '4月',align: 'center',width: 100,dataIndex: 'april',scopedSlots: {customRender: 'aprilFormat',},},{title: '5月',align: 'center',width: 100,dataIndex: 'may',scopedSlots: {customRender: 'mayFormat',},},{title: '6月',align: 'center',width: 100,dataIndex: 'june',scopedSlots: {customRender: 'juneFormat',},},{title: '7月',align: 'center',width: 100,dataIndex: 'july',scopedSlots: {customRender: 'julyFormat',},},{title: '8月',align: 'center',width: 100,dataIndex: 'august',scopedSlots: {customRender: 'augustFormat',},},{title: '9月',align: 'center',width: 100,dataIndex: 'september',scopedSlots: {customRender: 'septemberFormat',},},{title: '10月',align: 'center',width: 100,dataIndex: 'october',scopedSlots: {customRender: 'octoberFormat',},},{title: '11月',align: 'center',width: 100,dataIndex: 'november',scopedSlots: {customRender: 'novemberFormat',},},{title: '12月',align: 'center',width: 100,dataIndex: 'december',scopedSlots: {customRender: 'decemberFormat',},},{title: '汇总',align: 'center',width: 120,dataIndex: 'transverseSummary',fixed: 'right',scopedSlots: {customRender: 'transverseSummaryFormat',},},],

还是那句话,代码只是思路。 不要让百度限制自己想思路的脚步。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。