vue项目中使用element ui el-table合并单元格,根据业务需求动态合并的通用方式
<el-table
v-loading="listLoading"
:span-method="mergeLine"
:highlight-current-row="false"
:data="managerList"
style="width: 100%;margin-top:20px;"
border
>
</el-table>
mergeLine({ row, column, rowIndex, columnIndex }) {
const span = column['property'] + '-span';
if (row[span]) {
return row[span];
}
},
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; }
//下半部分会有错位的可能 // 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 // }; // } // console.log(v) // return v; // }); // }); // return data; // }
今天太忙了,后续再解释,也可以看原博主的博客哦
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;
}
// 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
// };
// }
// console.log(v)
// return v;
// });
// });
// return data;
// }