element table合并单元格
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element table组件合并行或列
在使用element table这个组件的时候,发现有些数据需要合并行,有些数据又要合并列,table自带了span-method这个方法,可以根据需要进行单元格的合并。
getSpanArr(data) {
this.spanArr = []
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判断这一条和上一条id是否相同
if (data[i].id === data[i - 1].id) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}else if(columnIndex === 1){
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}else if(columnIndex === 2){
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}else if(columnIndex === 3){
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
getSpanArr这个函数的作用是整合需要合并的行,假设data是需要处理的数据列表,对这个列表进行循环,如果是第一条先在spanArr数组加1,并且把这个位置pos置0,如果之后的数据和上一条数据的id相同,那就在同样的pos位置加1,同时push一个0,代表要合并的行的数量,如果不相同,就往spanArr中新加入一个1,同时记住位置。
这个方法需要数据已经是按id排序过的数组,即相同id的数据相邻。
objectSpanMethod是我写的span-method方法,因为我需要的是合并相同id的行的前4列单元格,首先判断columnIndex(列号)是多少,然后取出spanArr当前行号对应的数字,如果当前行号对应的数字是>0代表当前行存在且不需要合并,然后return,return既可以是一个对象,也可以是一个数组,第一个元素代表rowspan,第二个元素代表colspan。
这样就可以合并行的单元格。效果类似
但是如果要合并同一行中左右的单元格,达到如下的效果
这样需要合并同行的列,只需要控制一下想要合并的行就行
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
在行号对2取余数未0的时候,如果列号是0,就合并第0列和第1列,同时第1列要返回[0,0],此处必须要返回第一列的合并数组,否则table表就会多一列,因为第0列占据的colspan是2,此外其他列占据为1,会使表格显示不正常。
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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)