前言: 没搜到有合并行 全部都是合并列(写的还很复杂,大家有需要合并列的可以翻我前几篇 里边有封装好的方法 拿到方法 直接调用),然后就自己去看文档(虽然文档也是合并行和列放到一个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',},},],
还是那句话,代码只是思路。 不要让百度限制自己想思路的脚步。