Vue+Element-UI Table表头排序

Vue代码

<el-table v-loading="loading" :data="standardList" @sort-change='sortChange'>
      <el-table-column label="序号" prop="id" width="80" sortable='custom'/>
</el-table>

在 需要加上 @sort-change=‘sortChange’
sortable=‘custom’ 你要排序的字段，加在排序的字段上

定义后台需要接受的排序属性

data() {
     
	return {
     
		// 查询参数
        queryParams: {
     
          // 当前页
          pageNum: 1,
          // 每页大小
          pageSize: 10,
          // desc、asc排序规则
          isAsc: undefined,
          // 需要排序的字段
          orderByColumn: undefined
        },
	}
}

排序sortChange

sortChange 函数加在 methods: {} 中即可

//排序
sortChange (column, prop, order){
     
	// 可以打印一下该函数的参数就明白了
	// 下面的if判断根据自己的需要些我后台设置的只能识别desc与asc
	if (column.order != null) {
     
		this.queryParams.isAsc = 'desc';
	} else {
     
		this.queryParams.isAsc = 'asc';
	}
	// 排序的字段传给后台
	this.queryParams.orderByColumn = column.prop
	// 传入查询参数，重新查询一次
	this.list(this.queryParams);
},