elementUI table表格动态合并的示例代码

1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下demo,做的很直白,不过不太符合业务。在网上找了篇文章参考了一下

2.效果图如下:


在动态处理从后端拿回来的数据的时候,是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。

3.代码:

//合并单元格 二维数组-> 根据“标识”去遍历数据

data() {

return {

spanArr: [], //遍历数据时,根据相同的标识去存储记录

pos: 0 // 二维数组的索引

}

}

// methods中定义方法

getSpanArr(data) {

let that = this

//页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱

that.spanArr = []

that.pos = 0

//遍历数据

data.forEach((item, index) => {

//判断是否是第一项

if (index === 0) {

this.spanArr.push(1)

this.pos = 0

} else {

//不是第一项时,就根据标识去存储

if (data[index].moldName === data[index - 1].moldName) {

// 查找到符合条件的数据时每次要把之前存储的数据+1

this.spanArr[this.pos] += 1

this.spanArr.push(0)

} else {

// 没有符合的数据时,要记住当前的index

this.spanArr.push(1)

this.pos = index

}

}

})

console.log(this.spanArr, this.pos)

},

// 列表方法

objectSpanMethod({rowIndex, columnIndex}) {

// 页面列表上 表格合并行 -> 第几列(从0开始)

// 需要合并多个单元格时 依次增加判断条件即可

if (columnIndex === 3) {

// 二维数组存储的数据 取出

const _row = this.spanArr[rowIndex]

const _col = _row > 0 ? 1 : 0

return {

rowspan: _row,

colspan: _col

}

//不可以return {rowspan:0, colspan: 0} 会造成数据不渲染, 也可以不写else,eslint过不了的话就返回false

} else {

return false

}

}

created() {

let data = xxxxxxxxx

this.getSpanArr(data)

}

以上是 elementUI table表格动态合并的示例代码 的全部内容, 来源链接: utcz.com/z/332739.html

回到顶部