el-table合并表头,合并行
el-table表头合并,行合并
·
<el-table
border
max-height="700"
:data="tableData"
:header-cell-style="handerMethod"
:span-method="objectSpanMethod"
>
</el-table>
mergeObj: {},
//需合并的列
mergeArr: ['unitNameOne', 'unitNameTwo', 'unitNameThree', 'jxName'],
//合并行
//列表获取到数据后调用
rowspan () {
this.mergeArr.forEach((key, index1) => {
let count = 0
this.mergeObj[key] = []
this.tableData.forEach((item, index) => {
if (index === 0) {
this.mergeObj[key].push(1)
}
else {
//若本列上下行内容相同
if (item[key] === this.tableData[index - 1][key]) {
//若第一列,直接合并
if (index1 == 0) {
this.mergeObj[key][count] += 1
this.mergeObj[key].push(0)
}
//非第一列
else {
//若前一列上下行相同,合并
if (item[this.mergeArr[index1 - 1]] == this.tableData[index - 1][this.mergeArr[index1 - 1]]) {
this.mergeObj[key][count] += 1
this.mergeObj[key].push(0)
}
//若前一列上下行不同,不合并
else {
count = index
this.mergeObj[key].push(1)
}
}
}
else {
count = index
this.mergeObj[key].push(1)
}
}
})
})
},
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (this.mergeArr.indexOf(column.property) !== -1) {
if (this.mergeObj[column.property][rowIndex]) {
return {
rowspan: this.mergeObj[column.property][rowIndex],
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 0,
}
}
} else {
return {
rowspan: 1,
colspan: 1,
}
}
},
//合并表头
//合并单位表头
handerMethod ({ row, column, rowIndex, columnIndex }) {
if (row[0].level == 1) {
//这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
row[1].colSpan = 0
row[3].colSpan = 0
row[2].colSpan = 3
if (columnIndex === 1) {
return { display: 'none' }
}
if (columnIndex === 3) {
return { display: 'none' }
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)