element ui table 表格排序

實現elementui表格的排序

1：給table加上sort-change，給table每一項加上sortable和column-key，排序是根據column-key來進行排序的

<el-table :data="leavelist"
        border 
        v-loading="tableLoading"
        @sort-change="sortChange"
        style="width: 100%">
          <el-table-column
            prop="otname"
            sortable
            column-key="otname"
            :label="this.getRes('MyVacation.OverTimeType')"
          ></el-table-column>
          <el-table-column
            prop="txtbegindate"
            sortable
            column-key="begindate"
            :label="this.getRes('MyVacation.OverTimeDate')"
          ></el-table-column>
          <el-table-column
            prop="num"
            sortable
            column-key="num"
            :label="this.getRes('MyVacation.OverTimeHours')"
          >
          </el-table-column>
          <el-table-column
            prop="txtcl"
            sortable
            column-key="cl"
            :label="this.getRes('MyVacation.Transfer')"
          >
          </el-table-column>
          <el-table-column
            prop="clhours"
            sortable
            column-key="clhours"
            :label="this.getRes('MyVacation.TransferTime')"
          >
          </el-table-column>
          <el-table-column
            prop="txtclexp"
            sortable
            column-key="clexp"
            :label="this.getRes('MyVacation.ExpirationDate')"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            sortable
            column-key="remark"
            :label="this.getRes('MyVacation.Remark')"
          >
          </el-table-column>
          <el-table-column
            prop="txtstatus"
            sortable
            column-key="status"
            :label="this.getRes('MyVacation.Status')"
          >
          </el-table-column>
        </el-table>

2，定義sort-change方法

sortChange(column) {
      if (column.column != null) {
        let orderby = column.column.columnKey;
        if (column.order == 'ascending') {
          this.order = orderby + ' ' + 'asc';
          this.handSearch();
        } else if (column.order == 'descending') {
          this.order = orderby + ' ' + 'desc';
          this.handSearch();
        }
      } else {
        this.order = 'begindate asc';
        this.handSearch();
      }
    },

3，data里定義默認排序方法傳入發送請求的位置

 data() {
    return {
      order: 'begindate asc'
    }
  },

4，發送請求時，傳入order

handSearch() {
      this.disabled = true;
      this.tableLoading = true;
      var me = this;
      var serviceParams = {};
      if (this.datarange[0] != new Date(new Date().setHours(0, 0, 0, 0) - 2592000000)) {
        serviceParams.startdate = this.datarange[0];
      } else {
        serviceParams.startdate = new Date(new Date().setHours(0, 0, 0, 0) - 2592000000);
      }
      if (this.datarange[1] != new Date(new Date().setHours(0, 0, 0, 0))) {
        serviceParams.enddate = this.datarange[1];
      } else {
        serviceParams.enddate = new Date(new Date().setHours(0, 0, 0, 0));
      }
      serviceParams.pageIndex = me.thisPage;
      serviceParams.pageSize = me.thisPageSize;
      serviceParams.orderBy = this.order;
      if (this.overTimeValue) {
        serviceParams.otType = this.overTimeValue;
      } else {
        serviceParams.otType = '';
      }
      if (this.statusValue) {
        serviceParams.status = this.statusValue;
      } else {
        serviceParams.status = "";
      }
      var start = me.thisPage;
      var limit = me.thisPageSize;
      me.invokeService("OverTime", "GetMyOTInfoList", [serviceParams],
        function (msg) {
          this.disabled = false;
          var datalist = msg.ReturnData.$.toJson();
          me.total = msg.ReturnData.$.totalCount;
          var language = localStorage.getItem("Language");
          var arrylist = new Array();
          for (var i = 0; i < datalist.length; i++) {
            var item = datalist[i];
            item["txtbegindate"] = "";
            item["txtenddate"] = "";
            item["txtunit"] = "";
            item["txtattperiod"] = "";
            item["txtstatus"] = "";
            item["txtclexp"] = "";
            item["txtcl"] = "";
            if (item.status != "") {
              item.txtstatus = this.getRes('MyVacation.' + item.status);
            }
            if (item.unit != "") {
              item.txtunit = this.getRes('unit.' + item.unit);
            }
            if (item.begindate != "" && item.begindate != undefined) {
              item.txtbegindate = item.begindate.dateFormat(me.LocalUser.DateFormat);
            }
            if (item.enddate != "" && item.enddate != undefined) {
              item.txtenddate = item.enddate.dateFormat(me.LocalUser.DateFormat);
            }
            if (item.attperiod != "" && item.attperiod != undefined) {
              if (item.attperiod == null) {
                item.txtattperiod = "";
              } else {
                item.txtattperiod = item.attperiod.dateFormat(me.LocalUser.DateFormat);
              }
            }
            if (item.clexp != "" && item.clexp != undefined) {
              item.txtclexp = item.clexp.dateFormat(me.LocalUser.DateFormat);
            }
            if (item.cl != "" && item.cl != undefined) {
              if (item.cl == '1') {
                item.txtcl = '√'
              } else {}
            }
            arrylist.push(item);
          }
          me.leavelist = arrylist;
          this.tableLoading = false;
        },
        function () {
          this.disabled = false;
          this.tableLoading = false;
        }
      );
    }

效果圖：