elementui表格点击箭头进行后台排序

近期做项目是后台管理系统,遇到表格点击箭头进行后台排序,如下图

首先需要在要排序的字段加上 sortable="custom"和 prop必须加prop否则不生效

 <el-table-column
              :show-overflow-tooltip="true"
              fixed
              width="120px"
              prop="createTime"
              label="费用发生时间"
              sortable="custom"
            />

其次要在表格el-table上绑定事件@sort-change=“sortChange”

<el-table
            v-loading="loading"
            :data="tableData"
            class="table-self is-grey"
            height="100%"
            border
            style="width: 100%;"
            @sort-change="sortChange"
          >

js代码如下

 // 点击进行排序
      sortChange(column) {
        // 打印可以可以得到上下箭头的数据
        console.log(column)
        this.searchForm.sortingType = column.prop
        if (column.order == 'ascending') {
          this.searchForm.sortingRule = 'ASC'
        } else {
          this.searchForm.sortingRule = 'DESC'
        }
        this.orderCostList()// 查询列表方法

打印的数据如下图 会获取到当前箭头的数据

注:ascending是升序 sortingRule是排序规则:DESC是降序排列（descend 的缩写）,ASC是升序排列(ascending的缩写)