Ant Design的Table组件去除“取消排序”选项

　　在Ant Design的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。

　　首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。

import React, { useEffect, useState } from 'react';
import { Table } from 'antd'

export default () => {
  const [data, setData] = useState([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 30,
      address: 'Sidney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 25,
      address: 'London No. 2 Lake Park',
    },
  ]
  )
  const columns: any = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a: any, b: any) => a.age - b.age,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ]

  const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {
    //pagination分页、filters筛选、sorter排序变化时触发。extra:当前的data
    console.log(sorter)
  }
  return (
    <div>
      <Table columns={columns} dataSource={data} onChange={onChange} />
    </div>
  );
}

　　当我们点击排序时，会触发onChange事件，打印出的sorter如下：

　　

 　　其中，sorter.order为排序状态。undefined：取消排序，ascend：升序，descend：降序。

　　 如何去除取消排序呢？在官方提供的API中，有sortOrder和sortDirections这两个参数，

　　sortOrder：排序的受控属性，外界可用此控制列的排序，可设置为ascend、descend、false。　　　　　

　　sortDirections：支持的排序方式，覆盖Table中sortDirections， 取值为 ascend 、descend。

　　下面我们就来开始实现去除取消排序。

一、设置sortOrder

　　首先我们需要声明一个变量sortOrderTest，默认为descend

 const [sortOrderTest, setSortOrderTest] = useState<string>('descend')

　　然后给colum中的排序项Age设置sortOrder

{
   title: 'Age',
   dataIndex: 'age',
   sortOrder: sortOrderTest,
   sorter: (a: any, b: any) => a.age - b.age,
},

　　设置完成之后，每次点击排序，发现console输出的一直都是undefined，这是因为我们默认为descend，下一个状态为取消排序，而我们没有去更改sorter状态导致的。所以每次当我们onChange的时候，都要去改变一下设置的变量sortOrderTest

　const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {

    setSortOrderTest(sorter.order || 'descend')

  }

　　只改变sortOrderTest依然是不够的，这时再进行我们的第二步设置。

二、设置sortDirections

  {
     title: 'Age',
     dataIndex: 'age',
     key: 'age',
     sortOrder: sortOrderTest,
     sortDirections: ['descend', 'ascend'],
     sorter: (a: any, b: any) => a.age - b.age,
   }

　　这样设置完成之后，Table就去除了取消排序，只剩下升序和降序了。

三、优化

　　去除取消排序后，表头显示下一次排序的 tooltip 提示一直是点击升序、取消排序循环展示。取消排序其实就是降序，但是不够直观，目前菜菜的我尚未找到如何设置，暂时将tootip关闭。如果你有方法，也可以在评论中告诉我^_^　,后续我找到方法也会更新哦。要将tootip关闭，showSorterTooltip设置为false即可，具体设置如下：

{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  sortOrder: sortOrderTest,
  sortDirections: ['descend', 'ascend'],
  showSorterTooltip:false,
  sorter: (a: any, b: any) => a.age - b.age,
 }

　　项目中的排序一般是通过接口来排序的，要根据sorter来传不同的参数获取结果，这时候就可以用useEffect来处理。

　　首先，我们需要将更改column中的sorter，将其置为true。

{
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    sortOrder: sortOrderTest,
    sortDirections: ['descend', 'ascend'],
    showSorterTooltip: false,
    sorter: true,
 }

　　然后我们写一个请求函数

const getList = () => {
    let data = {
      sort: sortOrderTest
    }
    console.log(data)
    //根据参数去发送请求
    //await。。。。
    //请求成功之后设置data，达成排序
    //setData(result)
}

　　最后，将这个函数放到useEffect中，每当sorter改变的时候，就会自动触发该函数。

useEffect(() => {
    getList()
}, [sortOrderTest])

四、完整代码

import React, { useEffect, useState } from 'react';
import { Table } from 'antd'

export default () => {
  const [sortOrderTest, setSortOrderTest] = useState<string>('descend');
  const [data, setData] = useState([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 30,
      address: 'Sidney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 25,
      address: 'London No. 2 Lake Park',
    },
  ]
  )
  useEffect(() => {
    getList()
  }, [sortOrderTest])
  const getList = () => {
    let data = {
      sort: sortOrderTest
    }
    console.log(data)
    //根据参数去发送请求
    //await。。。。
    //请求成功之后设置data，达成排序
    //setData(result)
  }
  const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {
    setSortOrderTest(sorter.order || 'descend')
  }
  const columns: any = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sortOrder: sortOrderTest,
      sortDirections: ['descend', 'ascend'],
      showSorterTooltip: false,
      sorter: true,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  return (
    <div>
      <Table columns={columns} dataSource={data} onChange={onChange} />
    </div>
  );
}