本文介绍了如何在Vue.js中使用el-table组件进行表格数据处理，通过遍历接口返回的数据，根据特定条件（paramClass）合并相同单元格，并实现表头的合并。在数据处理部分，创建了一个数组arr来存储合并信息，然后利用span-method方法结合数组信息实现表格的动态合并。
1，处理接口返回表格数据
const arr = []
this.configData.forEach(ele => {
const firstIndex = this.configData.findIndex(item => {
return item.paramClass === ele.paramClass // 当paramClass相同的时候，返回第一个相同的Index 赋值给 firstIndex
})
if (arr.findIndex(item => {
return item.firstIndex === firstIndex
}) === -1) {
arr.push({
length: this.configData.filter(item => {
return item.paramClass === ele.paramClass // 利用数组的filter方法，过滤出相同paramClass的数组的长度。数组长度-即为跨多少行
}).length,
firstIndex: firstIndex // firstIndex 返回的是第一个catergory就满足的第一个Index,即为rowIndex开始于第几行。
})
}
// 如果是下拉框 获取下拉框的选项
if (ele.identification == 0) {
_this.getSelect(ele, ele.paramClass, ele.paramName)
}
})
this.indexInfoList
最低0.47元/天 解锁文章
5990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
