el-table使用合并行和列功能
通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。
·
通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
<el-table
border
:data="data_arr"
:span-method="objectSpanMethod"
>
......
// 遍历数据根据条件判断是否需要合并列
setData() {
// rowNumArr的为一项为需要合并的单元格数和数据data_arr一一对应
this.rowNumArr = []
this.data_arr.forEach((item, ind, arr) => {
if(ind) {
// 和上一个对比字段是否需要合并
if (item.seq === arr[ind -1].seq) {
// rowNumArr当前的当前项加一后,要添加一个特殊数据项,用于后续判断显示占横向单元格的数量,可以是0也可以是其他
this.rowNumArr[this.inde] += 1
this.rowNumArr.push(0)
} else {
// 不符合合并条件则添加1个单元格进去,并且记录当前下标
this.rowNumArr.push(1)
this.inde = ind
}
} else {
// 第一条数据一定有1个单元格
this.rowNumArr.push(1)
this.inde = 0
}
})
// return rowNumArr
},
/**
* 当前行 row
* 当前列 column
* 当前行号 rowIndex
* 当前列号 columnIndex
*/
// 合并行或列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 对当前了纵列号为0和1的单元格进行合并操作
if (columnIndex === 0 || columnIndex === 1) {
// 获取当前行的需要合并的单元格数
const rowNum = this.rowNumArr[rowIndex]
if (rowNum) {
// 一个单元格纵向横向合并的单元格数量
return {
rowspan: rowNum, // 纵向合并单元格的数量
colspan: rowNum > 0 ? 1 : 0 // 横向合并单元格的数量,纵向单元格数是0的话说明他是被合并的,横向单元格数也就为0不显示了,这里不考虑横向合并所以写死的是1
};
} else {
// 被合并项设置为0,即不显示单元格
return {
rowspan: 0,
colspan: 0
};
}
}
},
实现效果如图
参考博客:vue使用el-table动态合并列及行
更多推荐
所有评论(0)