el-table动态合并多级单元格
export default {
methods: {
mergeRow(data, merge) {
if (!merge || merge.length === 0) {
return data
}
merge.forEach((m) => {
const mList = {}
data = data.map((v, index) => {
const rowVal = v[m]
if (mList[rowVal] && mList[rowVal].newIndex === index) {
mList[rowVal]['num']++
mList[rowVal]['newIndex']++
data[mList[rowVal]['index']][m + '-span'].rowspan++
v[m + '-span'] = { rowspan: 0, colspan: 0 }
} else {
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1
}
v[m + '-span'] = { rowspan: 1, colspan: 1 }
} return v
})
})
return data
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column['property'] + '-span'
if (row[span]) {
return row[span]
}
},
},
}
使用
<el-table :data="tableData" :span-method="objectSpanMethod"></el-table>
this.mergeRow(tableData, ['合并字段A', '合并字段B'])
