<template>
<el-table
:data="virtualList1"
v-loading="listLoading"
border
ref="myTable"
:span-method="handleSpanMethod">
<template v-for="(header,index) in columnArray">
<el-table-column
v-if="header.isShow"
:fixed="header.isChange"
:key="index"
:label="header.label"
:prop="header.prop"
:sortable="header.isCustom? false:'custom'"
:min-width="
header.label.length <= 4
? '110px'
: header.label.length <= 6
? '140px'
: '160px'
"
resizable
align="center"
show-overflow-tooltip
>
</el-table-column>
</template>
</el-table>
<template>
data() {
return {
virtualList1:[],
columnArray:[
{
prop:'第一列',
label:"oneline",
isChange:true, // 是否固定
isShow:true, // 是否展示
isCustom:false, // 是否需要排序
},
{
prop:'第二列',
label:"twoline",
isChange:false,
isShow:true,
isCustom:false,
},
],
}
},
created(){
this.getData()
},
methods: {
//接口返回未排序的数据 先排序在合并
getData(){
// localeCompare 返回整数
let sortedArray = res.sort((a, b) => {
// 根据要排序的某第一列的值排序(比如同一组名的放一起)
if (a.groupCode !== b.groupCode ) {
return a.groupCode.localeCompare(
b.groupCode
);
} else {
// 排序第二列
return a.twogroupCode.localeCompare(
b.twogroupCode
);
}
});
this.virtualList1 = sortedArray;
},
/* 合并行
row: 行的全部数据
column:列的结构及其数据
rowIndex:行号,当前是第几行
columnIndex:列号,当前是第几列
*/
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (
rowIndex > 0 &&
row.groupCode ==
this.tableData[rowIndex - 1].groupCode
) {
return {
rowspan: 0,
colspan: 0,
};
}
let count = 1;
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
if (
this.tableData[i].groupCode ==
row.groupCode
) {
count++;
} else {
break;
}
}
return {
rowspan: count,
colspan: 1,
};
} else if (columnIndex === 1) {
if (
rowIndex > 0 &&
row.twogroupCode==
this.tableData[rowIndex - 1].twogroupCode
) {
return {
rowspan: 0,
colspan: 0,
};
}
let count = 1;
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
if (this.tableData[i].twogroupCode== row.twogroupCode) {
count++;
} else {
break;
}
}
return {
rowspan: count,
colspan: 1,
};
}
},
},
多列排序:根据某一列排序后的结果再接着排序第二列
于 2024-07-20 12:45:00 首次发布