antdv 表格远程排序过滤

html结构

<a-table
  bordered
  :data-source="list"
  @change="handleTableChange"
  :columns="columns"
  rowKey="id"
  :pagination="pagination"
  :loading="loading"
/>

columns js

this.columns = [
  {
    title: "设备地址",
    dataIndex: 'addr',
    key: 'addr',
    align: 'center',
    scopedSlots: { customRender: 'addr' },
    sorter: true, // 排序要注意的
  },
  {
    title: "设备网关",
    width: 180,
    dataIndex: 'imei',
    key: 'imei',
    filterMultiple: false,
    filters: [
      { text: 'Brown', value: 'Brown' },
      { text: 'Green', value: 'Green' },
      { text: 'Black', value: 'Black' },
    ], // 过滤要注意的
  },
]

handleTableChange js

handleTableChange(pagination, filters, sorter) {
  for (const key in filters) {
    this.pagination[key] = filters[key][0]
    // 注意要改变columns
    this.columns = this.columns.map((e) => {
      if (e.filters && e.key == key) {
        e.filteredValue = filters[key]
      }
      return e
    })
  }
  if (Object.keys(sorter).length) {
    this.pagination.sortField = sorter.field
    this.pagination.order = sorter.order
    // 注意要改变columns
    this.columns = this.columns.map((e) => {
      if (e.sorter && e.key == sorter.field) {
        e.sortOrder = sorter.order
      }
      if (e.sorter && e.key != sorter.field) {
        e.sortOrder = false
      }
      return e
    })
  }
  this.pagination.current = pagination.current
  this.pagination.pageSize = pagination.pageSize
  this.getList()
},