ant-design-vue中的table取消默認不排序的狀態

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

---

1、排序相關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<any> = [
    {
      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事件。

<a-table  
    :columns="columns"  
    :rowKey="record => record.id"  
    :dataSource="dataList"  
    @change="sorterChange"
></a-table>

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

      所以，咱們能夠經過判斷當前sorter對象是否爲空來判斷當前的狀態是否爲不排序狀態，並從新對其賦值並渲染，從而達到「消除」該狀態的目的。

2、具體實現
      根據上述的設置，目前的排序狀態切換爲：降序->升序->空->降序->升序->空...，爲了將該順序調整爲：降序->升序->降序->升序...，首先，咱們須要定義一個對象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;
}

3、總結

      以上的思路能夠總結爲兩步：       一、將值爲空對象的sorter從新賦值爲目標排序狀態的sorter，該目標狀態的sorter須要先存儲下來；       二、從新賦值後，再從新渲染目標排序列的樣式。