el-table做表格大家都很熟悉了，记下两个操作，怕忘记。

1.假如数据量–不多的话–前端实现分页，数据量太多会卡死。

 <el-table
          ref="classReport"
          :data="tableListData"
          min-height="500"
          border
          @sort-change="sortChange"//排序方法
          v-loading="loading2"
          @selection-change="handleSelectionNiche"
          style="width: 100%"
        >
          <el-table-column
            v-for="(item,index) in tableCaption"
            :key="index"
            :label="item.label"
            :prop="item.value"
            :sortable="item.value!=='label'&&item.value!=='income_group_name'"
            //上面的这段主要是用于去除有些不需要排序的列
            align="center"
            v-if="item.checked"
          >
            <template slot-scope="scope">
              <span v-if="item.value==='referlv'||item.value==='liyonglv'||item.value==='chuqinlv'||item.value==='dingkelv'">{{ scope.row[item.value]+'%' }}</span>
              <span v-else>{{scope.row[item.value]}}</span>
            </template>
          </el-table-column>
        </el-table>

后台接口返回过来的数据，定义两个数组并赋值。用watch监听dataList变化 主要是slice这一段，获取到你想要的那一段数据。

  watch: {
    dataList() {
      this.tableListData = this.dataList.slice(
        (this.currentPage - 1) * this.limit,
        this.currentPage * this.limit
      );
    }
  },

点击分页的我们就不用调用接口了，而且操作dataList数组

 //自己控制分页的方法
    getpageListData(params) {
      console.log(params)
      this.currentPage = params.page;
      this.limit = params.limit;
      this.tableListData = this.dataList.slice(
        (this.currentPage - 1) * this.limit,
        this.currentPage * this.limit
      );
    }

ps:（这个方法适合数据量不多的表格，如果数据量太大，第一次加载的时候会很慢）

2.表格排序

element-ui 有关于表格的排序，可以简单了解一下。

关于排序有两种 一种是后台排序，调后台接口就行了，根据和他商量的字段啥是正序啥是反序，
如果是后台排序的话 el-table-column 中需要配置成sortable =‘custom’
然后再el-table 中定义sort-change 方法

sortChange(column, prop, order) {
      console.log(column, prop, order);
      if (column.order === "descending") {
        this.order_field = column.prop;
        this.order_sort = "desc";
        this.getListData();//掉接口
      } else if (column.order === "ascending") {
        this.order_field = column.prop;
        this.order_sort = "asc";
        this.getListData();
      } else {
        this.order_field = "";
        this.order_sort = "";
      }
    },

如果是自己实现排序的话， 首先element-ui 只能实现当前页的排序，10条就只能排序10条，
有些cp狗 咳咳懂吧！
那就不掉接口了 直接那所有数据来排序，然后根据page size 来截取数据

先定义一个排序数组得方法

  sortFun: function(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;
      };
      // return (a, b) => {
      //   a[attr] - b[attr];
      // };
    },

然后点击按钮进行排序

  sort_Change(column) {
      this.currentPage = 1;
      this.$emit("currentChange", 1);
      this.config.data = this.config.data.sort(
        this.sortFun(column.prop, column.order === "ascending")
      );
      this.config.showData = this.config.data.slice(0, this.limit);
    }

附带上我自己写得组件 上面代码有点久了

<template>
  <div class="new_table">
    <el-table
      :data="config.showData"
      :min-height="config.minHeight||500"
      border
      v-loading="config.loading"
      @sort-change="sort_Change"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item,index) in config.option"
        :key="index"
        :label="item.label"
        :prop="item.value"
        :align="config.align||'center'"
        :sortable="config.sortable?(config.sortable==='custom'?'custom':(config.sortable.includes(item.value)?true:false)):false"
        v-if="item.checked"
      >
        <template slot-scope="scope">
          <span>{{ scope.row[item.value]===''?'--':scope.row[item.value]}}</span>
        </template>
      </el-table-column>
      <slot name="last_content"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: {}
    },
    currentPage: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {};
  },
  watch: {
    "config.data"() {
      this.config.showData = this.config.data.slice(
        (this.currentPage - 1) * this.limit,
        this.currentPage * this.limit
      );
    }
  },
  mounted() {
    console.log("传过去的数据", this.config);
  },
  methods: {
    // sort_Change(column) {
    //   this.$emit("sortChange", column);
    // },
    sortFun: function(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;
      };
      // return (a, b) => {
      //   a[attr] - b[attr];
      // };
    },
    sort_Change(column) {
      this.currentPage = 1;
      this.$emit("currentChange", 1);
      this.config.data = this.config.data.sort(
        this.sortFun(column.prop, column.order === "ascending")
      );
      this.config.showData = this.config.data.slice(0, this.limit);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

如果有问题可以call我，每天都在！