element控件table的排序功能(sortable=“custom“远程排序即在后台排序)

首先在el-table标签内添加监听事件 @sort-change="SortChange"

 

然后再要排序的列标签上添加参数 sortable="custom"

       

页面上只需要改动这两处

js方法

      这是排序箭头触发的事件(即table中添加的监听事件)

// table排序箭头变化时触发
	  SortChange(column, prop, order){
		  // 在方法触发时先获取并保存接口需要的字段,调用分页方法,分页方法中掉用了获取列表数据方法
	  		  let _this = this;
	  		  // console.log(column)
			  // column.order为空时仅刷新页面
	  		  if(column.order === null) {
	  		    this.descOrAce = "";
	  		    this.orderBy = "";
	  		    _this.handleCurrentChange(1);
	  		    return;
	  		  }
			  // 根据点击时打印出的colume.order判断是升序还是降序,并根据接口需要赋值0或1
	  		  this.descOrAce = column.order === "ascending" ? 1 : 0;//(descOrAce在全局data声明)
			  // 根据点击时打印出的colume.prop判断是哪一列
	  		  this.orderBy = column.prop;//(orderBy在全局data声明)
	  		  _this.handleCurrentChange(1);//(这里调用了分页的方法)
	  },

这是调用的分页方法

 这是请求页面数据的方法

GetList() {
        let _this = this;
		//这里声明的descOrAce和orderBy是为了在一面刚打开未点击排序按钮时加载默认列表(此时字段为空,请求路径中等同于没传)
		//当点击排序按钮后对descOrAce和orderBy进行赋值,根据值后台返回对应字段的正序或倒序的列表
		let descOrAce = "";
		let orderBy = "";
		if(this.descOrAce === 0 || this.descOrAce === 1) {
		    descOrAce = "&descOrAce="+_this.descOrAce;
		}
		if(this.orderBy) {
		orderBy = "&orderBy="+_this.orderBy;
		}
		// console.log(_this.orderBy)
        _this.$ajax(_this.$BaseUrl + "BigScreen/DuBanRecordList?rows=" + _this.Rows + "&page=" + 
		_this.Page + "&redOrYellow=" + _this.Type + "&poIntType=" + _this.PointType + "&duBanTime=" + 
		_this.MyDate + "&orgId=" + _this.StreetId + "&keyWord=" + _this.SearchText + descOrAce + orderBy,
		 "get", "").then(function (msg) {
          if (msg.data) {
            let data = msg.data.rows;
            _this.Records = msg.data.records;
            for (let i = 0; i < data.length; i++) {
              _this.TableData3.push(data[i]);
            }
          }
        }).catch((err) => {

        })
      },