elementtable表格合并⾏列思路
对el-table进⾏合并⾏或列需要在el-table标签添加合并⽅法 span-method。
<el-table  :data="tableData"  :span-method="arraySpanMethod"></el-table>
查看官⽅的合并⽅法arraySpanMethod的实现
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
element表格横向滚动条colspan: 0
};
}
}
}
⽅法参数为每⾏的⾏内数据，也就是tabledata数组中的对应项。
返回值为⾏列占⽐ rowspan: 2,colspan: 1 表⽰两⾏⼀列 也就是当前⾏占两⾏⼀列。
在此⽅法内进⾏判断明显不太⽅便，⽆法将列表的多⾏进⾏⽐较，我选择先通过其他⽅法预处理，将tabledata数据各⾏所占⾏列先计算出，填充到每⾏的数据中。
dealData:function(){
//先给所有数据加上rowspan
for (var index = 0; index < this.tableData.length; index++) {
this.tableData[index].rowspan = 1;
}
var errorCheck = 0;
for (let i = 0; i < this.tableData.length; i++) {
// 内层循环，上⾯已经给所有的⾏都加了wspan = 1
// 如果当前⾏的id和下⼀⾏的id相等
// 就把当前wspan + 1
// 下⼀⾏的wspan - 1
for (let j = i + 1; j < this.tableData.length; j++) {
//此处可根据相同字段进⾏合并，此处是根据的id
if (this.tableData[i].guid === this.tableData[j].guid) {
this.tableData[i].rowspan++;
this.tableData[j].rowspan--;
}
}
// 这⾥跳过已经重复的数据
errorCheck = i;
i = i + this.tableData[i].rowspan - 1;
if(errorCheck > i || i < 0){  //errorCheck是上⼀个数据的索引不可能⽐当前的数据索引⼤相同id数据不相邻可能会引起此错误造成死循环
alert('数据顺序错误，单元合并失败！');
return
}
}
},
此时tabledata每⾏应该占⼏⾏已经有rowspan属性记录，我们改写合并⽅法
arraySpanMethod:function(obj){
return {
rowspan: wspan,                        colspan: 1,
};
},
合并列思路相同

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。