iview 动态合并table组件单元格
程序员文章站
2024-02-28 17:35:52
...
原文章地址:https://blog.csdn.net/wakaka112233/article/details/107210611
HTML代码
// :span-method="handleSpan" 给想要合并的table组件绑定方法
<div>
<Table :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
</div>
// iview 单元格合并
handleSpan ({ row, column, rowIndex, columnIndex }) {
//合并第1列,这里columnIndex==0,根据需求的不同,需要前端写死
if(columnIndex == 0) {
//计算合并的行数列数
let x = row.mergeColumn == 0 ? 0:row.mergeColumn
let y = row.mergeColumn == 0 ? 0:1
return [x, y]
}
//合并第4列
if(columnIndex == 4) {
//计算合并的行数列数
let x = row.mergeColumn == 0 ? 0:row.mergeColumn
let y = row.mergeColumn == 0 ? 0:1
return [x, y]
}
},
assembleData(data){
let names = []
//筛选出不重复的 name值,将其放到 names数组中
data.forEach(e => {
if(!names.includes(e.jobName)){
names.push(e.jobName)
}
})
let nameNums = []
//将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
names.forEach(e => {
nameNums.push({jobName:e,num:0})
})
//计算每种 name值所在行需要合并的单元格数
data.forEach(e => {
nameNums.forEach(n => {
if(e.jobName == n.jobName){
n.num++
}
})
})
//将计算后的合并单元格数整合到 data中
data.forEach(e => {
nameNums.forEach(n => {
if(e.jobName == n.jobName){
if(names.includes(e.jobName)){
e.mergeColumn = n.num
//删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
names.splice(names.indexOf(n.jobName),1)
} else {
//被合并的单元格设置为 0
e.mergeColumn = 0
}
}
})
})
//将整理后的数据交给表格渲染
this.identicalList = data
},
mounted(){
/**-- 在mounted中将想要合并的数组放入方法中使这个数组相同名字的单元格合并 --**/
this.assembleData(this.resData)
}
上一篇: CCF 数据中心