Vue中使用element-ui对表格指定列进行前端全部排序

一：先看效果

二：步骤

1、对el-table绑定sort-change事件

@sort-change="sort_change"

如图：
2、需要排序列设置sortable=“custom”属性

如图：
3、data中存数据

// 表格数据
      data() {
		    return {
		      tableData: [],
		      //存放column.prop的字符串值
		      proptype: "", 
		      // 排序后为第一页
		      pagesNum: 1
	      }
      }

4、js实现代码

 methods: {
	// 排序方法
	    sort_change(column) {
	      // console.log(column.prop); //当前列需要排序的数据
	      // console.log(column.order); //排序规则：descending降序、ascending升序
	      this.pagesNum = 1; // 排序后返回第一页
	      if (column.prop === "operationAvgTime") { // 表格每一列对应的字段，必须一一对应
	        this.proptype = column.prop; // 将键名prop赋值给变量proptype
	        if (column.order === "descending") {
	          this.tableData.sort(this.my_desc_sort);
	        } else if (column.order === "ascending") {
	          this.tableData.sort(this.my_asc_sort);
	        }
	      } else if (column.prop === "numberScenarios") {  // 第二列排序  表格每一列对应的字段，必须一一对应
	        this.proptype = column.prop;
	        if (column.order === "descending") {
	          this.tableData.sort(this.my_desc_sort);
	        } else if (column.order === "ascending") {
	          this.tableData.sort(this.my_asc_sort);
	        }
	      }
	      },
	      //正序倒序方法
	    my_desc_sort(a, b) {
	      return b[this.proptype] - a[this.proptype];
	    },
	    my_asc_sort(a, b) {
	      return a[this.proptype] - b[this.proptype];
	    }
    }

三：END欢迎提建议留言