Element-UI中el-table根据列内容相同的值自动合并单元格
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1、处理表格单元格函数:
//设置单元格
getSpanArr(list) {
// 先给所有的数据都加一个v.rowspan = 1
list.forEach(item => {
item.rowspan = 1;
item.rowspan1 = 1;
// 有几列想合并就设置几个
...........
});
// 双层循环
for (let i = 0; i < list.length; i++) {
for (let j = i + 1; j < list.length; j++) {
//此处可根据相同字段进行合并
if (list[i].XXX== list[j].XXX) {
list[i].rowspan++;
list[j].rowspan--;
}
if (list[i].XXX== list[j].XXX) {
list[i].rowspan1++;
list[j].rowspan1--;
}
}
// 这里跳过已经重复的数据
i = i + list[i].rowspan - 1;
i = i + list[i].rowspan1 - 1;
}
this.tableData = list;
},
2.开始调用:
created(){
this.getSpanArr(表格数据)
}
3.table标签添加合并单元格函数:
:span-method="ObjectSpanMethod"
4.合并单元格函数:
// 合并单元格相同内容
ObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 第一列
if (columnIndex === 0) {
return {
rowspan: row.rowspan,
colspan: 1,
};
}
// 第二列
if (columnIndex === 1) {
return {
rowspan: row.rowspan1,
colspan: 1,
};
}
// row.XXX的值跟上述函数对应
.........
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)