oracle 单元格合并,element-ui table表格多行合并

前提条件:要求数据源必须是有序的(如按id分类,即id相同的要挨在一起,不能乱排。)

然后,首先对数据源进行一次遍历,计算每个id相同的有几项,然后做个标识

watch: {

list: { // 监听 list 数据

handler(val, oldVal) {

let list = this.list; // 数据源

let index = {};

for (let item of list) {

let token = item.ID; // 标识字段

// 没有该对象属性,说明第一次

if (index[token] === undefined) {

index[token] = 1;

} else {

index[idtoken++;

}

}

this.index = index; // 标识

},

deep:true // 深度监听,数据源发生变化重新计算

},

},

id 相同项,首行进行合并,合并后删除标识,比如第一个是[6, 1],后面五个则返回[0, 0]

objectSpanMethod({ row, column, rowIndex, columnIndex }) {

let cols = [0, 1, 2]; // 需要合并的列

if (cols.some(index => index === columnIndex)) {

let token = row.ID;

// 只针对首行做合并单元格操作

if (this.index.hasOwnProperty(token)) {

const rowSpan = this.groupNumber(token);

if (columnIndex === Math.max.apply(null, cols)) {

// 删除已经执行过合并操作的标识

delete this.index[token];

}

return [rowSpan, 1]

}

return [0, 0];

}

},

获取id相同的有几次

groupNumber(token) {

if (this.index && this.index.hasOwnProperty(token)) {

return this.index[token];

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值