element ui表格排序只排了当前页，想要排整个数据要怎么做，求支招

Question

element ui表格有分页，排序只排了当前页，想要排整个输出的数据应该怎么做？

<el-table v-loading.body="loading" :data="curGroupList" stripe="" style="width:100%" default-sort="{prop: 'date', order: 'descending'}">

    <el-table-column prop="F_Caption" label="名称" sortable>
    </el-table-column>
    <el-table-column prop="F_Caption02" label="类型" sortable>
    </el-table-column>
</el-table>
<!--分页-->
<el-pagination v-bind:current-Page="pageIndex" v-bind:page-size="pageSize" :total="total" layout="total,sizes,prev,pager,next,jumper"
     v-bind:page-sizes="pageSizes" v-on:size-change="sizeChange" v-on:current-change="pageIndexChange">
</el-pagination>

js部分

export default {
    data() {
        return {
            loading: true,
            groupList: [],
            curGroupList: [],
            showModal: 0,
            DetailList: [],
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            pageSizes: [10, 20, 50, 100]
        }
    },
    methods: {
        goToPerson: function(groupcode) {
            this.$router.push({
                path: 'person',
                query: {
                    code: groupcode
                }
            });
        },
        sizeChange: function(pageSize) {
            this.pageSize = pageSize;
            this.getPageData();
        },
        pageIndexChange: function(pageIndex) {
            this.pageIndex = pageIndex;
            this.getPageData();
        },
        getPageData() {
            this.totalPage = Math.ceil(this.total / this.pageSize);
            this.curGroupList = this.groupList.slice(this.pageSize * (this.pageIndex - 1), this.pageSize * this.pageIndex);
        },
    },
    mounted: function() {
        this.getGroupList();
    }

}

Answer 1

前端分页的话，全数据重排应该要自己实现一下：
监听sort-change事件，然后对整个this.groupList重排序。sort-change事件有三个参数{ column, prop, order }，够写排序用了。

Answer 2

通过向el-table增加@sort-change事件，向el-table-column增加sortable='custom'属性，向methods实现sortChange方法，可以实现数据在前台分页后的全部数据排序（不止本页排序）。

<el-table            
:data="tableData.slice((pageIndex-)*pageSize,pageIndex*pageSize)"
@sort-change="sortChange">
......

<el-table-column prop="reserve" label="库存量" sortable='custom'></el-table-column>
......

    /**
     * 表格排序事件处理函数
     * @param {object} {column,prop,order} 列数据|排序字段|排序方式
     */
    sortChange({ prop, order }) {
      this.tableData.sort(this.compare(prop,order));
    }
    /**
      * 排序比较
      * @param {string} propertyName 排序的属性名
      * @param {string} sort ascending(升序)/descending(降序)
      * @return {function}
      */
    compare (propertyName, sort) {
      return function (obj1, obj2) {
        var value1 = obj1[propertyName]
        var value2 = obj2[propertyName]
        if (typeof value1 === 'string' && typeof value2 === 'string') {
          const res = value1.localeCompare(value2, 'zh')
          return sort === 'ascending' ? res : -res
        } else {
          if (value1 <= value2) {
            return sort === 'ascending' ? -1 : 1
          } else if (value1 > value2) {
            return sort === 'ascending' ? 1 : -1
          }
        }
      }
    }

Answer 3

indexrank(index) {
  return index + 1 + (this.current - 1) * this.size;
}
用分页的当前也和当前页的多少计算一下