vue中使用element ui中的Table实现对全部数据进行排序

vue中使用element ui中的Table实现对全部数据进行排序:

一般情况下，对全部数据进行排序，是需要从后台获取的，但是有时候也会在前端对全部数据排序。

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

具体如下图所示：

初始showedData如图所示：

点击降序按钮 第一页如图所示：

第二页如图所示： 

 全部代码如下，可直接粘贴复制运行

<template>
  <div>
    <el-table
      :data="showedData"
      style="width: 100%;"
      @sort-change="sort_change"
    >
      <template v-for=