背景

crm系统中，使用elementui实现，table数据要根据某字段对所有数据后端排序。

展示

image.png

实现方案

点击排序按钮，获取排序方式和排序字段，通过接口传给后端，返回排序后的数据进行展示。

具体代码实现

1、table上要监听排序sort-change

<el-table ref="shopTable" :data="tableData" @sort-change="sortChange">

2、column上要加自定义sortable

<el-table-column :label="$t('shop.ratingStar1')" prop='ratingStar' sortable width="100"></el-table-column>

3、sortChange实现

sortChange(column) {
      if ( column.order ) {
        this.shopForm.sortField = column.prop
        this.shopForm.sortOrder = column.order === 'descending' ? 'desc' : 'asc'
      } else {
        this.shopForm.sortField = ''
        this.shopForm.sortOrder = ''
      }
      this.handleSearch() //获取列表数据接口
    },