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);
},