Vue + Element-ui 分页+搜索 table中的data属性重复使用问题

背景：
1、在使用Vue + Element-ui 用table 表格做分页的时候使用

:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

2、在使用Vue + Element-ui 用table表格做搜索时的时候使用

:data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase())|| data.commodity_name.toLowerCase().includes(search.toLowerCase()))

那么问题就来了，都是用data属性，如果同时需要分页和搜索怎么办。
所以:
首先在最开始就把整体上面设计好：
1、设置一个变量用来存放数据的长度。
（因为查询从时候整个数据长度是要变的，当然页码长度也要跟着变，不然就会出现，分页还是之前的分页，但是数据没那么多。意思就是说查询的数据肯定没有总数据多，但是显示的是总数据的页码）
注意要用parseInt 转换格式，因为这里需要一个int格式，

并在获取完数据之后，把数组长度赋值给这个变量

2、使用computed 监听
我们在使用搜索框时有这么一个属性

同监控这个属性变化区分此时是搜索还是分页

computed: {
  table_data() {
    let search = this.search;
    // 搜索功能
    if (search){
      let list =this.tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase())|| data.commodity_name.toLowerCase().includes(search.toLowerCase()));
      let fenye = list.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
      // 获取查询的结果，把数组长度赋值给 分页组件中的total
      this.tableData_length = fenye.length;
      return list,fenye
    }
    // 分页功能
   else {
     //所有数据的长度  赋值给分页组件中的total
      this.tableData_length = this.tableData.length;
      let fenye = this.tableData.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
      return fenye
    }
  }
}

此时data 属性绑定 方法名

此时： 既可以分页，又可以查询，查询后的数据分页显示正常，删除查询条件后，数据显示全部分页正常。

完美！