Vue-Element-table 动态合并单元格
程序员文章站
2022-06-08 15:41:40
...
<el-table
:data="PowerList"
:span-method="objectSpanMethod" // 重点*************
border>
</el-table>
data () {
return {
PowerList: [], 需要合并的列表
spanArr: [], 第一列需要合并
spanArr2: [], 第二列需要合并
spanArr3: [] 第三列需要合并
}
}
spanArr 为需要合并列数,需要合并几列添加几个
methods: {
// 判断合并单元格
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 0 为第一列合并
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
if (columnIndex === 1) {
// 1 为第二列合并
const _row = this.spanArr2[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
if (columnIndex === 2 || columnIndex === 3 || columnIndex === 6) {
// 2, 3, 6 为第2, 3, 6列合并
const _row = this.spanArr3[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
// 获取列表数据并合并单元格
getTableList (id) {
this.$axios.get('/api/v2/assessRules?assessId=' + id
)
.then(response => {
if (response.data.code === 0) {
console.log(response.data.data)
// 以下为合并单元格
this.PowerList = response.data.data
let contactDot = 0
let concatTwo = 0
let concatThree = 0
this.PowerList.forEach((item, index) => {
item.index = index
if (index === 0) {
this.spanArr.push(1)
this.spanArr2.push(1)
this.spanArr3.push(1)
} else {
// categoryName 合并列的参数
if (item.categoryName === this.PowerList[index - 1].categoryName) {
this.spanArr[contactDot] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
contactDot = index
}
// name 合并列的参数
if (item.name === this.PowerList[index - 1].name) {
this.spanArr2[concatTwo] += 1
this.spanArr2.push(0)
} else {
this.spanArr2.push(1)
concatTwo = index
}
// assessContent 合并列的参数
if (item.assessContent === this.PowerList[index - 1].assessContent) {
this.spanArr3[concatThree] += 1
this.spanArr3.push(0)
} else {
this.spanArr3.push(1)
concatThree = index
}
}
})
} else {
this.$message.error(response.data.result)
}
})
},