element表格行列的动态合并示例详解_vue.js_

效果图

合并行

合并列

element的table提供了合并行或者列的方法，并且有一个示例，传送入口：element.eleme.cn/#/zh-CN/com…

但是实际应用中，后台数据的返回格式和指定合并肯定是动态且没有规律的。element的示例过于简单，并且也没有什么太多的解释。实操中就碰到了这个问题。现在记录下来。

代码详解

实操中，需要合并的代码通常就是子数据需要进行合并，因为后台返回的格式都是父数据中包裹着子数据，这种格式看起来也是比较清晰。方便用在其他地方或者随时更改需求（比如不需要表格），因此数据格式转换就由前端进行负责了。

数据结构

后台返回的大概就是这种结构

originData: [ { sort: '01', children: [ { name: '01-1号' }, { name: '01-2号' } ] }, { sort: '02', children: [ { name: '02-1号' }, ] } ] 

行合并

因为element的table展示行的时候是遍历数组的，data中有几条数据就会展示出几行，然而我们进行行合并的时候，肯定是展示子数据的行数。因此，我们需要对原数据进行操作，将包裹在children中的数据展开，总行数就是每个children的长度之和。

在展开数据的同时，我们就可以进行行合并的合并行数赋值操作了！

通过map展开数据，在展开循环每一个children时，给children里的第一个元素增加了一个代表着合并长度的字段，值为该children的长度，代表着我这一个数据该合并几行

if(subIndex == 0){ content['rowNum'] = res.children.length } 

行合并的时候，就可以直接通过判断rowNum的数值进行合并了，有rowNum的数值的表示需要变成rowNum行，没有的则表示需要隐藏，赋值为0。这一部分记住，虽然合并了行，但是本身还是要占用一列的。如果忘记赋值合并多少列，就会被隐藏掉

if(columnIndex == 0){ return { rowspan: row.rowNum, // 合并行数 colspan: row.rowNum>0?1:0 // 合并列数 }; } 

列合并

列合并的时候不需要去操作数据格式了（针对我上面写的那种格式，具体看后台返回的数据结构），但是需要去知道我的表格里该有多少列，即取最多子元素的children长度，赋值为columnLength

获得了需要多少列后，就需要进行合并列操作了，我们要获得几个值：

• 总列数：需要在求出的columnLength的基础上增加父数据的列数，我这里父数据只有sort，因此总列数需要+1，就是columnLength+1
• 当前列数：合并的方法会返回当前行的详细数据，同理还得+1，所以当前列数是row.children.length+1
• 待合并列数的列：表示我第几列开始需要合并了，即我当前数据最后一个有参数的值，赋值columnSort。在进行判断之后，等同于当前列数为row.children.length + 1
• 待合并列：表示我需要合并成几列，为总列数-待合并列数的列，同时不要忘记自身占一列，需要+1，赋值columnNum，为columnLength + 1 - columnSort + 1

上面的几个参数获取只要理清楚了各个数据之间的关系之后，其实并不难，就是普通的加减，但要是理不清楚，着实会晕一段时间。

console.log(`总列数${this.columnLength+1}，当前列数${row.children.length+1}`); if(row.children.length < this.columnLength){ let columnSort = row.children.length + 1 let columnNum = this.columnLength + 1 - columnSort + 1 if(columnIndex+1 == columnSort){ return{ rowspan: 1, colspan: columnNum } }else if(columnIndex+1 > columnSort ){ return [0, 0]; } console.log(`第${rowIndex+1}行,第${columnSort}列待合并${columnNum}列`); } 

完整代码+注释

以上就是element表格行列的动态合并示例详解的详细内容，更多关于element表格行列动态合并的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！