1.最近在做的erp项目，有一个需求是同一个客户下的同种订单，需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下demo，做的很直白，不过不太符合业务。在网上找了篇文章参考了一下
十载的安徽网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整安徽建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“安徽网站设计”,“安徽网站推广”以来，每个客户项目都认真落实执行。
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)
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
