ant-design-vue中的table組件具有排序的屬性，該排序屬性有三種狀態：升序、降序和不排序。在項目開發中，有時產品經理會要求排序時只能有升序或降序兩種狀態，而table組件中卻沒有相應的API配置，那么我們如何取消不排序的狀態呢？

一、排序相關API

table組件中關于排序的API有4個：sorter、sortOrder、sortDirections以及change事件。

sorter：排序函數，本地排序使用一個函數，需要服務端排序可設為 true。

sortOrder： 排序的受控屬性，外界可用此控制列的排序，可設置為 'ascend'、'descend'、'false'。

sortDirections：sortDirections: ['ascend' | 'descend']改變每列可用的排序方式，切換排序時按數組內容依次切換，設置在table props上時對所有列生效。使用defaultSortOrder屬性，設置列的默認排序順序。

change：分頁、排序、篩選變化時觸發。

這三個API都需要設置在Column中，Column是列描述數據對象，是 columns 中的一項，Column 使用相同的 API。例如：

columns: Array = [

{

title: '平均處理時間/ms',

dataIndex: 'avgRt',

width: '10%',

sorter: true,

sortOrder: false,

sortDirections: ['descend', 'ascend'],

scopedSlots: { customRender: 'avgRt' }

}, {

title: '最大處理時間/ms',

dataIndex: 'maxRt',

width: '10%',

sorter: true,

sortOrder: false,

sortDirections: ['descend', 'ascend'],

scopedSlots: { customRender: 'maxRt' }

}

]

上面的代碼說明在table中有兩列數據具有排序功能，排序功能由服務端提供，排序方式按照降序、升序的順序依次切換。

除了上述3個屬性之外，我們還需要在排序時觸發chang事件。

:columns="columns"

:rowKey="record => record.id"

:dataSource="dataList"

@change="sorterChange"

>

sorterChange(pagination, filters, sorter)有3個回調參數，其中跟排序相關的是sorter參數，它是一個對象，包含field、order屬性，field描述當前排序的列，order描述當前排序的順序。當處于不排序狀態時，sorter對象為空。

因此，我們可以通過判斷當前sorter對象是否為空來判斷當前的狀態是否為不排序狀態，并重新對其賦值并渲染，從而達到“消除”該狀態的目的。

二、具體實現

根據上述的設置，目前的排序狀態切換為：降序->升序->空->降序->升序->空...，為了將該順序調整為：降序->升序->降序->升序...，首先，我們需要定義一個對象sortObj對象用于存儲sorter對象的值。當sorter.order === 'descend'時，將此時的sorter賦值給sortObj，當判斷出當前sorter.order為空時，即狀態為不排序，將上一步存儲降序狀態的sortObj賦值給sorter，并重新渲染該列的排序樣式，那么就能將不排序狀態修改為降序狀態。

sorterChange (pagination, filters, sorter) {

let sortObj = {};

if (sorter.order === 'descend') {

sortObj = sorter;

}

if (!sorter.order) {

sorter = sortObj;

}

switch (sorter.field) {

case 'avgRt':

this.sortTrans(sorter, 0);

break;

case 'maxRt':

this.sortTrans(sorter, 1);

break;

}

}

渲染函數為sortTrans，它接收兩個參數：sorter和index，index為當前列數據在columns數組中的位置。通過重新渲染當前列，并將其它排序列的sortOrder置為false，從而使每次切換排序時，都只有當前列處于排序狀態。

sortTrans (sorter, index) {

for (let i = 0; i < 2; i++) {

this.columns[i].sortOrder = false;

}

this.columns[index].sortOrder = sorter.order;

}

三、總結

以上的思路可以總結為兩步：

1、將值為空對象的sorter重新賦值為目標排序狀態的sorter，該目標狀態的sorter需要先存儲下來；

2、重新賦值后，再重新渲染目標排序列的樣式。

總結

以上是生活随笔為你收集整理的antd table排序 vue_ant-design-vue中的table取消默认不排序的状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。