-
需求:后端返回的表格数据,如果某列值一样,前端表格样式需要合并他们,需要合并的列的行数未知(所以需要有数据后遍历后端数据对需要合并的属性进行计数)即动态遍历表格合并
-
效果
-
-
重点方法;table自带的:span-method="objectSpanMethod"方法
-
代码环境:vue2 ,element
-
代码
js// tempalte 里 <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" > <el-table-column prop="Name" label="名称" align="center"></el-table-column> <el-table-column prop="Level" label="等级" align="center" ></el-table-column> <el-table-column prop="currenttime" label="时间" align="center" ></el-table-column> </el-table>
js// script data(){ return{ tableData:[ { Name: 'AAA', Level: '1', currenttime: '2024-1-29', }, { Name: 'AAA', Level: '2', currenttime: '2024-1-29', }, { Name: 'AAA', Level: '2', currenttime: '2024-1-29', }, { Name: 'CCC', Level: '2', currenttime: '2024-1-29', }, ], } }, method:{ // 表格合并列 objectSpanMethod({ row, column, rowIndex, columnIndex }){ // 判断第一列的行合并 if (columnIndex === 0 ) { const _row = this.getSpanArr(this.tableData,'Name')[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } // 判断第二列的行合并 if (columnIndex === 1 ) { const _row = this.getSpanArr(this.tableData,'Level','Name')[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } }, // 计算合并行数 getSpanArr(data,key,faKey) { /** * data 表身数据 * key当前需要合并的属性名称 * faKey :如果有多列属性需要行合并,此时需要判断第二个属性需不需再第一个属性相同的条件下才合并,不需要就不用传,需要就穿第一个属性名 * */ // 遍历数据 let spanArr=[] let pos = 0 for (let i = 0; i < data.length; i++) { // 如果是第一个数据,就将列表spanArr添加一个1,表示暂时只有一个名字相同的、且将索引pos赋值为0 if (i === 0) { spanArr.push(1); pos = 0 } else { // 判断当前元素与上一个元素是否相同(且只有同faKey 下的第二列才能合并,不同faKey 下的第二列重新计数,如果不需要这样判断,就去除&&后面的判断) if (data[i][key] === data[i - 1][key] && data[i][faKey] === data[i - 1][faKey] ) { // 如果相同就将索引为 pos 的值加一 spanArr[pos] += 1; // 且将数组添加 0 spanArr.push(0); } else { // 如果元素不同了,就可以通过索引为 pos 的值知晓应该需要合并的行数 // 同时,我们再次添加一个值1,表示重新开始判断重复姓名的次数 spanArr.push(1); // 同时 索引加一 pos = i; } } } console.log("索引数组:") console.log(spanArr,key) return spanArr }, }
element -table,多行或列合并
禾苗种树2024-01-31 22:01
相关推荐
顽疲9 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换开开心心就好42 分钟前
电脑息屏工具,一键黑屏超方便江号软件分享43 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库Savior`L2 小时前
CSS知识复习5许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱秋田君7 小时前
深入理解JavaScript设计模式之命令模式中微子7 小时前
React 状态管理 源码深度解析风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器