element-UI + удаленная сортировка таблицы vue и сортировка с ручным вмешательством

Удаленная сортировка таблицы:

Добавлен атрибут для сортировки: sortable='custom'

добавлена ​​таблица: @sort-change='sortChange'

Паж мопсов:

  el-table(
    :data='dataList'
    border
    @sort-change='sortChange'
  )
    el-table-column(prop='ruleId' label='配置编号' align='center' sortable='custom' width='120')
    ...
    el-table-column(prop='lastUpdateTime' label='最后修改时间' align='center' width='140' sortable='custom')

js:

    // 监听表头点击获取排序参数
    sortChange(column) {
      const { order = '', prop = '' } = column;
      this.loadData(order, prop);
    },

Согласитесь с серверной частью, чтобы запросить интерфейс функции данных для добавления параметров:

    loadData(order = 'descending', prop = 'lastUpdateTime') { // 加载数据
      const params = {
        ...
        'orderBy.property': prop, 
        'orderBy.direction': order === 'ascending' ? 'asc' : 'desc',
      };
      ...
    },

Если в заголовке таблицы нужно отсортировать два реквизита, укажите метод сортировки по умолчанию:

Добавьте атрибут в html:: default-sort='defaultSort'

  el-table(
    :data='dataList'
    border
    @sort-change='sortChange'
    :default-sort='defaultSort'
  )

js:

defaultSort: {
    prop: 'lastUpdateTime',
    order: 'descending',
},

Если щелкнуть другой реквизит для сортировки, а затем нажать кнопку запроса, как я могу вручную вмешаться, чтобы изменить выбранное состояние сортировки на отсортированный реквизит по умолчанию:

набор столов арт.:

  el-table(
    :data='dataList'
    border
    @sort-change='sortChange'
    :default-sort='defaultSort'
    ref="table"
  )

js:

search() { // 搜索数据
 this.loadData();
 this.$refs.table.sort('lastUpdateTime', 'descending'); // 手动修改table排序按钮选中状态
},