<el-table
border
ref="measurementRef"
:data="tableData"
:span-method="objectSpanMethod"
highlight-current-row
:header-cell-style="{ 'text-align': 'left' }"
:cell-style="{ 'text-align': 'left' }"
@selection-change="handleSelectionChange">
</el-table>
methods: {
filterData(arr) {
const spanOneArr = []
let concatOne = 0
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1)
} else {
if (item.assessid == arr[index - 1].assessid) { // 第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1 // 跨行数+1
spanOneArr.push(0) // 数组后边补0
} else {
spanOneArr.push(1)
concatOne = index
}
}
})
return {
one: spanOneArr
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 合并的列索引
if (columnIndex === 1) {
// this.tableData 修改
// [7, 0, 0, 0, 0, 0, 0]
const _row = (this.filterData(this.tableData).one)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
}
vue 动态合并相同单元格
最新推荐文章于 2024-09-14 17:07:18 发布
文章描述了如何在Vue项目中使用el-table组件实现表格数据的行合并,以及调整表头样式。方法中定义了filterData和objectSpanMethod函数,用于根据评估ID合并行并动态计算跨行和跨列的span属性。
摘要由CSDN通过智能技术生成