关于前端:element中table数据全部排序

实现思路

首先有两个数组 showedData 和tableData。showedData 用来放当前页的数据，tableData用来放所有数据。为表格绑定 @sort-change 事件，当点击表头的排序 icon 时，调用 sort_change 办法, 该办法外部调用的 sortFun 办法能够为 tableData 进行排序，showedData显示排好序的前四条数据。

<template>
  <div>
    <el-table
      :data="showedData"
      style="width: 100%;"
      @sort-change="sort_change"
    >
      <template v-for="(item,index) in cities">
        <el-table-column v-if="item.type=='sort'":prop="item.prop":label="item.label":key="index"sortable="custom"></el-table-column>
        <el-table-column v-else :prop="item.prop" :label="item.label" :key="index" ></el-table-column>
      </template>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="pageSize"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  export default {data() {
      return {
        cities:[
          {
            prop:'position',
            label:'城市',
          },
          {
            prop:'followNum',
            label:'新增人数',
            type:'sort',
          },
          {
            prop:'unFollowNum',
            label:'勾销关注人数',
            type:'sort',
          },
          {
            prop:'increaseNum',
            label:'净增人数',
            type:'sort',
          },
          {
            prop:'currdateFollowNum',
            label:'累积人数',
            type:'sort',
          }
        ], // 表头数组，数组中依据 type 判断该列是否能够排序
        pageNum: 1, // 当前页数
        pageSize: 4, // 每页条数
        total: 5, // 总数
        showedData:[
          {
            position:'成都',
            followNum:'11',
            unFollowNum:'22',
            increaseNum:'33',
            currdateFollowNum:44
          },
          {
            position:'长沙',
            followNum:'111',
            unFollowNum:'222',
            increaseNum:'333',
            currdateFollowNum:444
          },
          {
            position:'上海',
            followNum:'1',
            unFollowNum:'2',
            increaseNum:'3',
            currdateFollowNum:4
          },
          {
            position:'北京',
            followNum:'11111',
            unFollowNum:'22222',
            increaseNum:'33333',
            currdateFollowNum:44444
          }
        ], // 当前页的数据
        tableData: [
          {
            position:'上海',
            followNum:'1',
            unFollowNum:'2',
            increaseNum:'3',
            currdateFollowNum:4
          },
          {
            position:'成都',
            followNum:'11',
            unFollowNum:'22',
            increaseNum:'33',
            currdateFollowNum:44
          },
          {
            position:'长沙',
            followNum:'111',
            unFollowNum:'222',
            increaseNum:'333',
            currdateFollowNum:444
          },
          {
            position:'西安',
            followNum:'1111',
            unFollowNum:'2222',
            increaseNum:'3333',
            currdateFollowNum:4444
          },
          {
            position:'北京',
            followNum:'11111',
            unFollowNum:'22222',
            increaseNum:'33333',
            currdateFollowNum:44444
          }
        ], // 所有的数据
      }
    },
    mounted() {},
    methods:{sort_change(column) { // column 是个形参，具体查看 element-ui 文档
        this.pageNum = 1 // return to the first page after sorting
        this.total = this.tableData.length
        this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
        this.showedData = this.tableData.slice(0, this.pageSize) // 排序完显示到第一页
      },
      sortFun (attr, rev) {
        // 第一个参数传入 info 里的 prop 示意排的是哪一列，第二个参数是升还是降排序
        if (rev == undefined) {rev = 1;} else {rev = (rev) ? 1 : -1;
        }
        return function (a, b) {a = a[attr];
          b = b[attr];
          if (a < b) {return rev * -1;}
          if (a > b) {return rev * 1;}
          return 0;
        }
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.showedData = this.tableData.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
      },
    }
  }
</script>