<el-table v-loading="loading" :data="tableData" style="width: 100%" highlight-current-row :span-method="arraySpanMethod">
<el-table-column type="index" label="序号" />
<el-table-column v-for="item in formThead" :key="item.label" :label="item.label" :prop="item.prop" :formatter="item.formatter" :width="item.width || 'auto'" />
</template>
</el-table-column>
</el-table>
watch: {
tableData: {
handler(newVal) {
this.tableColumns = newVal
this.rowspan()
},
deep: true
}
},
data(){
mergeObj: {},
mergeRecording: [], // 合并记录 存放需要合并列的每行对应的合并数 [[当前行对应的合并数, 当前行对应的合并数, ...], ...]
mergeArr: [
'instrumentCode',
'instrumentName',
'checkQuantity',
....... formThead的prop
]
}
// 合并逻辑
rowspan() {
for (let i = 0; i < this.mergeArr.length; i++) {
const key = this.mergeArr[i]
this.mergeObj[key] = [] // 记录合并数组
this.mergeRecording[i] = [] // 记录本列合并的开头索引值
let count = 0 // 合并数组对应索引
this.tableData.forEach((item, index) => {
// 当前为第一行的时候
if (index === 0) {
this.mergeObj[key].push(1)
this.mergeRecording[i].push(index)
} else {
let lastState = false
// 跳过表格第一列(序号)，真实列从定义需要合并的列为基准
if (i === 0) {
lastState = true
} else
// 判断左列上下单元是否合并，适用场景为连续的合并
if (this.mergeRecording[i - 1][index] === this.mergeRecording[i - 1][index - 1]) {
lastState = true
}
// 如果说当前行与上一行是相同的数据
if (item[key] === this.tableData[index - 1][key] && lastState) {
this.mergeObj[key][count] += 1 // 上一行的合并数+1
this.mergeObj[key].push(0) // 当前行的合并数是0
this.mergeRecording[i].push(count) // 本单元格的合并的开头索引值
} else {
// 如果说当前行与上一行不相同 那么两个都不进行合并所以返回1，索引变成当前行索引
this.mergeObj[key].push(1)
count = index
this.mergeRecording[i].push(count) // 赋值合并的开头索引值
}
}
})
// console.log(this.mergeRecording[i])
}文章来源：https://www.toymoban.com/news/detail-784760.html
},
// 合并方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (this.mergeArr.indexOf(column.property) !== -1) {
if (this.mergeObj[column.property][rowIndex]) {
return [this.mergeObj[column.property][rowIndex], 1]
} else {
return [0, 0]
}
} else {
return [1, 1]
}
}文章来源地址https://www.toymoban.com/news/detail-784760.html
到了这里，关于Element ui el-table 合并单元格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
