1.el-table标签里添加 :span-method=“方法名”(前面加“:”表示动态数据),在方法中处理合并行/列的逻辑。
<el-table
ref="orderingTable"
:span-method="objectSpanMethod"
></el-table>
2.首先看看官网的例子,但是很难满足需要
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { //用于设置要合并的列
if (rowIndex % 2 === 0) { //用于设置合并开始的行号
return {
rowspan: 2, //合并的行数
colspan: 1 //合并的列数,设为0则直接不显示
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
3.排序好的数据进行合并js(亲测好用)
/**
1. table合并行通用 */
export function mergeTableRow(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]++
data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
v[m + '-span'] = {
rowspan: 0,
colspan: 0
}
} else {
mList[rowVal] = 1
v[m + '-span'] = {
rowspan: 1,
colspan: 1
}
}
return v
})
})
return data
}
//这是单独的引入,写在js上,我单独摘出来为了方便看
import { mergeTableRow } from "@/api/lib/airtjtool";
4.没有排好序的
/**
1. 改良后(不相邻的数据相互不受影响)
2. table合并行通用 */
export function mergeTableRow(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
}
5.主要调用如下
created(){
// 给table赋值,重新遍历新增rowSpan属性,checkRoom,appointmentTime为table里面需要合并的属性名称,根据自己需要给表赋值
this.table = mergeTableRow(this.table, ['checkRoom', 'appointmentTime'])
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//合并列的属性
const span = column['property'] + '-span'
if(row[span]){
return row[span]
}
}
}