antd-vue - - - - - a-table排序
- 1. 重點代碼:
- 2. 代碼示例:
- 3. 進階版寫法
1. 重點代碼:
sorter: {compare: (a, b) => a.columnsKeys - b.columnsKeys,multiple: 1,
},
解析:
compare: 自定義排序函數,用于比較兩個對象。
multiple: 排序優先級權重(數字越大優先級越高)。
2. 代碼示例:
<template><a-table :columns="columns" :data-source="data" @change="onChange" />
</template>
<script setup>
const columns = [{title: 'Name',dataIndex: 'name',},{title: 'Chinese Score',dataIndex: 'chinese',sorter: {compare: (a, b) => a.chinese - b.chinese,multiple: 3,},},{title: 'Math Score',dataIndex: 'math',sorter: {compare: (a, b) => a.math - b.math,multiple: 2,},},{title: 'English Score',dataIndex: 'english',sorter: {compare: (a, b) => a.english - b.english,multiple: 1,},},
];
const data = [{key: '1',name: 'John Brown',chinese: 98,math: 60,english: 70,type1: 1,type2: 'star',type3: '張三',},{key: '2',name: 'Jim Green',chinese: 98,math: 66,english: 89,type1: 2,type2: 'moon',type3: '李四',},{key: '3',name: 'Joe Black',chinese: 98,math: 90,english: 70,type1: 3,type2: 'sun',type3: '王五',},
];
function onChange(pagination, filters, sorter, extra) {// 監聽表格變化事件,比如分頁、排序、過濾等(回調函數)console.log('params', pagination, filters, sorter, extra);
}
</script>
上述代碼,分別對
chinese、math、english
三列設置了排序。
multiple
的值設置的不一樣,數值越大,優先級越高。- 比如同時對三列都進行排序,
先滿足chinese
的篩選條件,再滿足math
的篩選條件,再滿足english
的篩選條件
3. 進階版寫法
當排序的列類型不僅僅為數字類型時,排序就會出現混亂。解決辦法就是針對不同類型,設置不同的compare。
columns.map(col => {if (['type1'].includes(col.dataIndex)) {// 數值型字段排序return {...col,sorter: {compare:(a, b) => Number(a[col.dataIndex]) - Number(b[col.dataIndex]),multiple: 1}};} else if (['type2'].includes(col.dataIndex)) {// 字符串字段排序return {...col,sorter: (a, b) => a[col.dataIndex].localeCompare(b[col.dataIndex]),};} else {// 默認處理:假設其他列都可以按照字符串比較來排序return {...col,sorter: (a, b) => ('' + a[col.dataIndex]).localeCompare('' + b[col.dataIndex]),};}