实现效果
// 假设要排序的数组
[{ 'score', '升序'}, { 'age', '升序' } ]
// 此时要按照 score升序排，然后在 score升序排的基础上按照 age 升序排。
// 按照排序数组，以数据结果示例，score是升序，age是在score相同时进行升序
const res = [
{
score: 10,
age: 1,
},
{
score: 10,
age: 2,
},
{
score: 11,
age: 1,
},
];
1.html代码
<el-table :data="sortedData" @sort-change="handleSortChange">
<el-table-column prop="score" label="分数" />
<el-table-column prop="age" label="年龄" />
</el-table>
2.js 代码
<script setup lang="ts">
import { ref, watch } from "vue";
// 排序数组
const sortsFilter: any = ref([]);
const handleSortChange = ({ prop, order }) => {
const i = sortsFilter.value.findIndex((v: any) => v.prop === prop);
if (i > -1) {
sortsFilter.value[i].order = order;
} else {
sortsFilter.value.push({ order, prop });
}
};
// 最终渲染 table 数据
const sortedData: any = ref([]);
// 监听排序数组，进行排序
watch(
() => sortsFilter.value,
() => {
sortedData.value = [...tableData.value].sort(compositeSort);
},
{
deep: true,
}
);
// 排序方法
const compositeSort = (a, b) => {
for (const { prop, order } of sortsFilter.value) {
const modifier = order === "ascending" ? 1 : -1;
if (a[prop] < b[prop]) return -1 * modifier;
if (a[prop] > b[prop]) return 1 * modifier;
}
return 0;
};
</script>
