vue el-table排序功能

这里使用的是，需要后端进行排序 

在需要使用排序的列上添加 sortable="custom"，并且在el-table添加监听事件@sort-change调用后端接口

sortable="custom" 是一个固定的标识

1 2 3 4

<el-table :data="dataList" @sort-change='sortTableFun'>   // 需要排序的列添加 sortable="custom" 后端排序   <el-table-column prop="prodIdName"  label="商品名称" sortable="custom" />  </el-table>

点击排序列监听事件@sort-change会传递一个对象给我们定义的方法。

这个对象中可以获取到我们需要的两个值，一个是需要排序的值即列上绑定的prop值；以及排序的方式descending。

1 2 3 4 5 6 7 8 9 10 11 12 13

// 调用后端排序 sortTableFun(val) {   this.dataForm.orderField = null;   if (val.order) {     // val.prop 是排序的字段，即在前端列上绑定的prop上的值     // <el-table-column prop="prodIdName",注意注意注意：这个值可能是为了展示名称的id值     // 因此在后端判断是否是这个属性值排序时，还要根据表中具体的值继续排序     this.dataForm.orderField = val.prop     // val.order 是排序的方式     this.dataForm.orderMethod = val.order == "descending" ? "desc" : "asc";     this.searchQuery();   } },