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的变化，从而实现初始默认勾选。

 

欢迎留言交流。