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

最新推荐文章于 2025-05-30 14:42:04 发布

煸橙干儿~~

最新推荐文章于 2025-05-30 14:42:04 发布

阅读量893

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE实战文章标签： vue.js 前端状态模式

本文链接：https://blog.csdn.net/sinat_34896766/article/details/137960330

VUE实战专栏收录该内容

73 篇文章

订阅专栏

本文介绍了如何使用ElementUI的el-table组件解决接口返回数据过慢问题，通过前端对数据进行筛选和分页处理，实现实时条件查询和动态页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、表格

表格采用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()方法即可。