vue 纯前端实现表格分页和条件查询功能

由于接口返回数据过慢，故而采用前端对数据进行处理分页的方法实现表格分页及条件查询。

一、表格 

        表格采用elementUI的el-table，只需要对数据data进行处理赋值即可。

   <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>

二、对数据的处理 

        假设后端接口返回的数据为data，且有两个筛选条件：name和id，在此要对数据先进行筛选，再实现分页。

dataFilter(){
    // name过滤
    let list = this.data.filter((item, index) => {
        item.name.includes(this.searchData.name)
    }
    // id过滤
    let idList = list.filter((item, index) => {
        item.id.includes(this.searchData.id)
    }
    // 实现分页
    this.tableData = idList .filter((item, index) =>
        index < this.page * this.pageSize && index >= this.pageSize* (this.page - 1)
    }
    // 总数量赋值
    this.totalData = idList.length
}

三、跳页，搜索等功能

        在跳页、搜索等按钮点击的时候，将页数修改为对应数据，再调用dataFilter()方法即可。