ant-design-vue中的table組件具有排序的屬性，該排序?qū)傩杂腥N狀態(tài)：升序、降序和不排序。在項(xiàng)目開發(fā)中，有時(shí)產(chǎn)品經(jīng)理會(huì)要求排序時(shí)只能有升序或降序兩種狀態(tài)，而table組件中卻沒有相應(yīng)的API配置，那么我們?nèi)绾稳∠慌判虻臓顟B(tài)呢？

一、排序相關(guān)API

table組件中關(guān)于排序的API有4個(gè)：sorter、sortOrder、sortDirections以及change事件。

sorter：排序函數(shù)，本地排序使用一個(gè)函數(shù)，需要服務(wù)端排序可設(shè)為 true。

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

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

change：分頁、排序、篩選變化時(shí)觸發(fā)。

這三個(gè)API都需要設(shè)置在Column中，Column是列描述數(shù)據(jù)對(duì)象，是 columns 中的一項(xiàng)，Column 使用相同的 API。例如：

columns: Array = [

{

title: '平均處理時(shí)間/ms',

dataIndex: 'avgRt',

width: '10%',

sorter: true,

sortOrder: false,

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

scopedSlots: { customRender: 'avgRt' }

}, {

title: '最大處理時(shí)間/ms',

dataIndex: 'maxRt',

width: '10%',

sorter: true,

sortOrder: false,

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

scopedSlots: { customRender: 'maxRt' }

}

]

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

除了上述3個(gè)屬性之外，我們還需要在排序時(shí)觸發(fā)chang事件。

:columns="columns"

:rowKey="record => record.id"

:dataSource="dataList"

@change="sorterChange"

>

sorterChange(pagination, filters, sorter)有3個(gè)回調(diào)參數(shù)，其中跟排序相關(guān)的是sorter參數(shù)，它是一個(gè)對(duì)象，包含field、order屬性，field描述當(dāng)前排序的列，order描述當(dāng)前排序的順序。當(dāng)處于不排序狀態(tài)時(shí)，sorter對(duì)象為空。

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

二、具體實(shí)現(xiàn)

根據(jù)上述的設(shè)置，目前的排序狀態(tài)切換為：降序->升序->空->降序->升序->空...，為了將該順序調(diào)整為：降序->升序->降序->升序...，首先，我們需要定義一個(gè)對(duì)象sortObj對(duì)象用于存儲(chǔ)sorter對(duì)象的值。當(dāng)sorter.order === 'descend'時(shí)，將此時(shí)的sorter賦值給sortObj，當(dāng)判斷出當(dāng)前sorter.order為空時(shí)，即狀態(tài)為不排序，將上一步存儲(chǔ)降序狀態(tài)的sortObj賦值給sorter，并重新渲染該列的排序樣式，那么就能將不排序狀態(tài)修改為降序狀態(tài)。

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;

}

}

渲染函數(shù)為sortTrans，它接收兩個(gè)參數(shù)：sorter和index，index為當(dāng)前列數(shù)據(jù)在columns數(shù)組中的位置。通過重新渲染當(dāng)前列，并將其它排序列的sortOrder置為false，從而使每次切換排序時(shí)，都只有當(dāng)前列處于排序狀態(tài)。

sortTrans (sorter, index) {

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

this.columns[i].sortOrder = false;

}

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

}

三、總結(jié)

以上的思路可以總結(jié)為兩步：

1、將值為空對(duì)象的sorter重新賦值為目標(biāo)排序狀態(tài)的sorter，該目標(biāo)狀態(tài)的sorter需要先存儲(chǔ)下來；

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。