【ant design vue】a-table组件默认排序

项目需求：要求日报表格有按照创建时间、工作时间排序，并且初始化时按照创建时间倒序排列，最后去除‘取消排序’切换

首先：html里边画一个表格，这里主要使用的是ant design vue组件库的a-table组件

<template>
  <a-table :columns="columns" :data-source="data" @change="onChange" />
</template>

排序的话a-table组件提供了属性，主要是通过配置column的几个属性来实现排序

我们现在通过这几个参数来实现一下需求：

const columns = [
  {
    dataIndex: 'index',
    width: 50,
    key: 'index',
    title: '序号',
    customRender: function (text, record, index) {
      return index + 1
    },
  },
  {
    sorter: false,
    dataIndex: 'F_STAFF_1645090957756_NAME',
    width: 100,
    sortField: 'F_STAFF_1645090957756_NAME',
    title: '姓名',
    align: '',
  },
  {
    sorter: false,
    dataIndex: 'F_DEPT_1645091090687_NAME',
    width: 100,
    sortField: 'F_DEPT_1645091090687_NAME',
    title: '提交部门',
    align: '',
  },
  {
    scopedSlots: { customRender: 'F_DATE_1645097264442' },
    // 控制工作时间可以排序
    sorter: true,
    dataIndex: 'F_DATE_1645097264442',
    width: 100,
    sortField: 'F_DATE_1645097264442',
    title: '工作日期',
    align: '',
  },
  {
    scopedSlots: { customRender: 'CREATE_TIME_' },
    dataIndex: 'CREATE_TIME_',
    width: 100,
    sortField: 'CREATE_TIME_',
    title: '创建时间',
    align: '',
    key: 'CREATE_TIME_',
    // 控制创建时间可以排序，并且重写排序规则函数
    sorter: (a, b) => {
      let aTime = new Date(a.CREATE_TIME_).getTime()
      let bTime = new Date(b.CREATE_TIME_).getTime()
      return aTime - bTime
    },
	// 支持的排序方式
	// 默认点击排序按钮是：顺序、倒序、取消排序
	// 注意：['descend', 'ascend', 'descend']属性值这样配置目的是去除 ‘取消排序’的排序方式
    sortDirections: ['descend', 'ascend', 'descend'],
    // 配置默认是倒序
    defaultSortOrder: 'descend',
  },
  {
    sorter: false,
    dataIndex: 'F_WORK_CATEGORY_NAME',
    width: 100,
    sortField: 'F_WORK_CATEGORY_NAME',
    title: '工作类别',
    align: '',
  },
  {
    sorter: false,
    dataIndex: 'F_SHORTTEXT_1645091934048',
    width: 100,
    sortField: 'F_SHORTTEXT_1645091934048',
    title: '工作任务',
    align: '',
    ellipsis: true,
  },
  {
    sorter: false,
    dataIndex: 'F_SHORTTEXT_1645091406927',
    width: 100,
    sortField: 'F_SHORTTEXT_1645091406927',
    title: '使用工时/H',
    align: '',
  },
]

总结：

sorter: true ： 对某一列数据进行排序
defaultSortOrder: ‘descend’ 设置列的默认排序顺序为倒叙
注意：
sortDirections 是用来配置支持的排序方式的，默认值是 [‘ascend’ | ‘descend’]，点击切换排序依次是 顺序、倒序、取消排序三种