ant-design table組件rowSelection列對勾選和未勾選分類排序

場景描述：

在表格第一列顯示勾選框，支持行多選。然後在這一列的列頭增加排序按鈕，對已勾選和未勾選的行進行排序。

 

解決方案：

常用的解決方案有兩種：

1，利用table組件本身的rowSelections屬性，對其進行封裝改造，實現需求。

2，給表格綁定的數據增加一列，列頭樣式爲勾選框+排序按鈕。數據列顯示勾選框組件。

 

這裏爲了充分利用table組件本身的接口方法，採用第一種方案。

首先在computed鉤子函數內定義rowSelection：

rowSelection () {
      const _this = this
      return {
        selectedRowKeys: _this.selectedRowKeys,
        onChange: _this.onSelectChange,
        hideDefaultSelections: true,
        selections: [
          {
            key: 'sortCheckRow',
            text: 'sort',
            onSelect: () => {
              this.sortTableRow()
            }
          }
        ]
        // getCheckboxProps: record => ({
        //   props: {
        //     defaultChecked: _this.selectedRowKeys.includes(record.id) // 當前需要勾選的行
        //   }
        // })
      }
    }

hideDefaultSelections: 設置爲true， 則不展示rowSelection下拉選擇菜單的兩個選擇項按鈕。

this.selectedRowKeys這個變量值由rowSelection中的onChange事件決定

onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }

然後我們自定義一個排序的選擇項按鈕在裏面，並且定義一個觸發方法：sortTableRow。

//列表根據checkbox是否勾選分類排序
    sortTableRow () {
      const checkedRows = this.$refs.table.localDataSource.filter(t => this.selectedRowKeys.includes(t.id))
      const uncheckedRows = this.$refs.table.localDataSource.filter(t => !this.selectedRowKeys.includes(t.id))
      let newTableData = []
      switch (this.sortFlag) {
        case 0: // 初始狀態時點擊排序，勾選在前
          newTableData = checkedRows.concat(uncheckedRows)
          this.sortFlag = 1
          break
        case 1: // 勾選在前時點擊排序，勾選在後
          newTableData = uncheckedRows.concat(checkedRows)
          this.sortFlag = -1
          break
        case -1: // 勾選在後下時點擊排序，恢復初始狀態
          newTableData = this.tableCache
          this.sortFlag = 0
          break
        default:
          break
      }
      this.$refs.table.localDataSource = newTableData
    },

這個方法主要用來模擬table組件的列的sort功能。

分別獲取當前勾選和未勾選的行，然後根據當前排序標識，重新組裝排好序的數組賦給表格數據源。

這樣就實現了基於勾選行的排序功能。

最後，關於表格行的勾選狀態的初始加載，直接將好表格數據行的id數組賦給selectedRowKeys這個變量就行，它的變化會觸發table屬性rowSelection中selectedRowKeys的變化，從而實現初始默認勾選。

 

歡迎留言交流。