Vue2+element-ui 实现分页基础上的全表格数据排序+模糊搜索

最近遇上一个需求需要实现table表全数据的排序，然而element-ui提供的default-sort排序不支持全表格数据排序，仅实现分页中当前页面的数据排序，当页码发送变化时，排序就失效了。

后来发现提供的sort-change事件可以获取当前排序的字段名和排序顺序，因此可以根据这点对原始tableData进行需求的个性化排序，我们可以在点击列排序的那一刹那，对原始数据根据当前‘列’进行全表排序，然后再将排序好的原始tableData根据区间赋值给显示的showDatas。这样就能保证在页码跳转时，每页显示的数据是全表中已经排序好的。

好了，以下做出的效果以及代码…

一、附上效果图
（1）（点击年龄升序排序）
第一页

第二页

（2）（点击时间降序排序）
第一页

第二页

（3）模糊搜索

二、代码

<template>
  <div class="Table">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>查询内容</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        >
      </div>
      <!-- 表格 -->
      
      <div>
        <el-input v-model="search"  placeholder="输入关键字搜索"/>
        <el-table
          fixed
          :height="550"
          :data="showDatas.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @sort-change="sortChange"
        >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="name" show-overflow-tooltip label="姓名" ></el-table-column>
        <el-table-column prop="age" show-overflow-tooltip label="年龄" sortable="custom"></el-table-column>
        <el-table-column prop="date" show-overflow-tooltip label="日期" sortable="custom"></el-table-column>
        <el-table-column prop="address" show-overflow-tooltip label="地址" ></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Table",
  data() {
    return {
      search: '',
      currentPage: 1,    // 当前页
      pageSize: 10,      // 每页大小，默认10
      tableData: [],     // 原始table数据
      showDatas: [],     // 展示的table数据
    }
  },
  methods:{
    // 1.改变页面选项触发的方法（val:显示的每页大小）
    handleSizeChange(val) {
      this.currentPage = 1;   // 跳转第一页
      this.pageSize = val     // 每页大小赋值给绑定的pageSize
      this.showDatas = this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);   // 抓取区间数据
    },

    // 2.改变页码触发的方法(val:触发的当前页码)
    handleCurrentChange(val) {
      this.currentPage = val;  // 跳转当前页
      this.showDatas = this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);   // 抓取区间数据
    },
    // 3.排序监听
    sortChange(column) {
      this.tableData = this.tableData.sort(
        this.SortFun(column.prop, column.order === "ascending")
      );
      this.showDatas = this.tableData.slice(0, this.pageSize);
      this.currentPage = 1;
    },

    // 4.排序方法
    SortFun(attr, rev) {
      this.currentPage = 1;
      //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
      if (rev == undefined) {
        rev = 1;
      } else {
        rev = rev ? 1 : -1;
        //rev = rev>0 ? 1 : -1;
      }
      return function (a, b) {
        a = a[attr];
        b = b[attr];
        if (a != null) {
          // 1.列数据类型为string时的排序
          if (typeof a == "string") {
            // 1.1 判断是否为日期类型
            if (a.split(" ").length === 2) {
              if (a < b) {
                return rev * -1;
              }
              if (a > b) {
                return rev * 1;
              }
              return 0;
            }else if(!isNaN(a)){
              // 是否能转为数字类型
              // console.log("字符数字类型",attr,a)
              if (parseFloat(a) < parseFloat(b)) {
                return rev * -1;
              }
              if (a > b) {
                return rev * 1;
              }
              return 0;
            }
            else{
              // 1.2 普通字符类型
              //console.log("普通字符类型",attr,a)
              if (a < b) {
                return rev * -1;
              }
              if (a > b) {
                return rev * 1;
              }
              return 0;
            }
          }
          // 2. 列数据类型为number时的排序
          if (typeof a == "number") {
            //console.log("Number型:", a);
            if (a < b) {
              return rev * -1;
            }
            if (a > b) {
              return rev * 1;
            }
            return 0;
          }
        }
      };
    },

    // 获取数据
    getDatas() {
      // 请求获取数据
      const res = [
        { name: '张三', date:'2022-04-01 12:11:01', age:'18', address:'上海市普陀区金沙江路 1000 弄'},
        { name: '李四', date:'2022-04-02 04:11:01', age:'20',address:'上海市普陀区金沙江路 1001 弄'},
        { name: '王五', date:'2022-04-03 08:11:01', age:'21',address:'上海市普陀区金沙江路 1002 弄'},
        { name: '张三', date:'2022-04-04 16:11:01', age:'22',address:'上海市普陀区金沙江路 1003 弄'},
        { name: '李四', date:'2022-04-05 10:11:01', age:'23',address:'上海市普陀区金沙江路 1004 弄'},
        { name: '王五', date:'2022-04-06 09:11:01', age:'22',address:'上海市普陀区金沙江路 1005 弄'},
        { name: '张三', date:'2022-05-02 10:11:01', age:'20',address:'上海市普陀区金沙江路 1006 弄'},
        { name: '李四', date:'2022-05-05 11:11:01', age:'21',address:'上海市普陀区金沙江路 1007 弄'},
        { name: '王五', date:'2022-05-06 10:11:01', age:'24',address:'上海市普陀区金沙江路 1008 弄'},
        { name: '张三', date:'2022-05-07 09:11:01', age:'25',address:'上海市普陀区金沙江路 1009 弄'},
        { name: '李四', date:'2022-05-08 14:11:01', age:'24',address:'上海市普陀区金沙江路 1010 弄'},
        { name: '王五', date:'2022-05-10 02:11:01', age:'20',address:'上海市普陀区金沙江路 1011 弄'},
      ]
      
      this.currentPage = 1;    // 当前页置1
      this.tableData = res;    // 首先请求的数据赋值给全表List
      this.showDatas = this.tableData.slice(0, this.pageSize);  // 然后显示区间数据（无排序触发），且这里显示1-10条
    }
  },
  created() {
    this.getDatas()   // 页面初始化，请求数据并在表格显示
  }
};
</script>

<style>
</style>