[JavaScript知识库]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>

在<el-table @sort-change=‘sortChange’> 需要加上@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);
},