el-table表格合并
需要注意的是objectSpanMethod方法里外层只能包含一个 if else
// 表格合并 实现相同属性名的行合并
mergeTable () {
this.spanArr = [] // 清空数组,否则刷新出错
for (var i = 0; i < this.dataList.length; i++) {
if (i === 0) {
this.spanArr.push(1)
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (this.dataList[i].positionName === this.dataList[i - 1].positionName) {
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.pos = i
}
}
}
},
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
// 如果spanArr下标===x 就合并
if (rowIndex !== this.length) {
if (columnIndex === 0 || columnIndex === 5) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
//合并指定的列
} else {
if (columnIndex === 0) {
return [1, 4]
} else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
return [0, 0]
}
}
}
作者:whh666
出处:https://www.cnblogs.com/whh666/p/15931898.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构