elementUI框架有分页的情况下的筛选功能实现

最新推荐文章于 2024-05-16 10:56:06 发布
最新推荐文章于 2024-05-16 10:56:06 发布
阅读量2.8k 收藏 11
点赞数 3
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengcheng111111111/article/details/108975003
版权

一、无分页的情况

无分页的情况下，利用前端就能实现筛选功能，如下图所示，添加filters属性和filter-method方法即可。此过滤方法会执行多次（有几行就会执行几次），由于分页功能是需要后端配合实现的，如果在此方法内调用接口，则会请求多次，造成资源浪费，影响性能。

二、有分页的情况

要想在有分页的情况下进行筛选，需要调用后台接口，elementUI提供了另一种方法filter-change方法。首先在筛选标签的位置加column-key属性，如下图所示

然后在table标签里加@filter-change事件，用于处理当筛选条件发生变化时的回调，如下图所示

 

真点程序员
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue+Element表格本地分页过滤
yycdaizi的专栏
10-18 1852
关键点 过滤：全量数据单独保存，增加计算属性根据过滤条件计算过滤后的表格数据tableData。 分页：增加一个计算属性pageData，根据当前页号currentPage和每页大小pageSize从表格数组里过滤出当前页的数据。分页条的总行数设为过滤后的数据的条数。 代码 <template> <section > <el-form :inline="tru...
Element-ui table 分页、搜索框 整体同步实现
weixin_42061364的博客
06-18 1168
前端展示列表的场景比较多，当遇到一些数据不是很多，但是不能同时展示时，就需要前端对表格进行分页操作了 element-ui中的表格、分页、搜索框都是单独的组件，没有联系，但是平时使用中这三个都是紧密联系在一起同步实现的，网上也有一些将这三个功能封装到一起的ui框架或组件，这里用elementui简单实现了一下这个功能 template 代码： <div class="line-row"> <div class="search-per" style="width:
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）_el-select 分页(1)
最新发布
fksdskjfzxklzk的博客
05-16 695
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
element ui table 分页情况下的多页筛选
qq_45845523的博客
03-30 2324
<template> <div class="OsaProject"> <h1 style="align:center">element ui table 筛选</h1> <div> <el-table ref="filterTable" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
element ui table+分页 筛选全部数据-demo
tradas的博客
07-25 2217
<el-table :data=“tableData” highlight-current-row v-loading=“listLoading” element-loading-text=“请稍后…” style=“width: 100%;” @filter-change=“filterTagTable” > 已回答 未回答 查看详情 删除 data(){ re...
Element table分页表单使用筛选
Mr-k的博客
06-28 1853
Element table表单分页下使用筛选
filter分页
cn_yyh的博客
07-02 269
filter package com.zhongruan.filter; import com.zhongruan.bean.User; import javax.jws.soap.SOAPBinding; import javax.servlet.*; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletRes.
vue实现表格的查询，下拉框，以及分页功能
10-25
在Vue.js框架中，开发一个具备查询、下拉框选择、分类显示和分页功能的表格是一个常见的需求。下面将详细介绍如何实现这些功能。 首先，我们需要安装必要的依赖库，如Element UI，它提供了丰富的UI组件，包括表格...
基于elementui分装了简单的表格分页查询逻辑
08-12
本项目“基于elementui分装了简单的表格分页查询逻辑”显然是利用Element UI的Table组件，并对其进行了功能扩展，实现了数据的分页和查询功能。 首先，我们要了解Element UI中的Table组件。它是一个高度可定制的...
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
ElementUI离线文档（1.4-2.4）
11-01
- 表格（Table）：用于展示数据的组件，支持排序、筛选、分页等功能。 - 对话框（Dialog）：用于显示临时内容的弹出窗口，可设置为确认框、提示框或全屏模式。 - 通知（Notification）：全局的通知提示，可以快速...
ElementUI离线文档（2.15.7）
11-01
2. **表格** (Table)：ElementUI 的表格组件支持数据的展示、排序、筛选、分页等功能，并可以通过列定义来自定义显示内容。此外，表格还支持行操作和合并单元格。 3. **对话框** (Dialog)：对话框组件用于显示临时...
前端分页并多条件筛选
weixin_43931203的博客
09-19 570
项目用的是View Design插件，需求是前端自行分页并且列表中有多个筛选条件。 本想使用插件原有的筛选方法，但发现其只对当前页进行筛选，所以想到用计算属性来进行筛选
element-ui在table分页的情况下实现多页筛选(单列/多列)
Dreamlxx的博客
04-19 6355
element-ui官网提供的筛选样例只能对当前页的数据进行筛选 我这里是在表头上嵌入popover实现多页筛选，效果如下 代码如下 <template> <div> <!-- 表格 --> <el-table :data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) " style="
element-ui中的el-table实现分页多选功能
MISS_zhang_0110的博客
05-05 7100
selection-change事件：当选择项发生变化时会触发该事件（当分页切换时，选中的数据都会自动清空）
使用elementUI组件实现表格的分页以及搜索功能
m0_69983788的博客
08-09 9964
使用elementUI组件实现表格的分页以及搜索功能，主要的UI组件：el-input、el-table、el-pagination
element-ui table分页/筛选后保留勾选项
Guoxuxinwen的博客
09-20 820
element table 勾选不消失
Vue3 ElementPlus 的 table 中使用过滤器
wj1713520的博客
04-13 4621
vue3 elementPlus 过滤器
前端分页及搜索
weixin_小白鼠的博客
04-19 1057
前端分页及搜索过滤的简单实现 一般分页和搜索过滤都是后端来完成，，但是有时临时加的需求，数据简单，后端改起来涉及到的地方比较多，比较麻烦就由前端来完成 <template> <div> <a-input-search v-model="inputKey" placeholder="姓名搜索" style="width: 200px" @search="onSearch" /> &l
Vue elementui下拉框加分页搜索功能的实现方法
06-01
可以使用Element UI组件库中的`<el-select>`组件和`<el-option>`组件来实现下拉框加分页搜索功能。以下是一个简单的示例代码： ```html <template> <div> <el-select v-model="selectedItem" filterable remote :remote-method="fetchData" :loading="isLoading"> <el-option v-for="item in items" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination> </div> </template> <script> export default { data() { return { selectedItem: null, items: [], total: 0, currentPage: 1, pageSize: 10, isLoading: false } }, methods: { fetchData(query) { this.isLoading = true; setTimeout(() => { // 发送ajax请求获取数据 // ... // 将获取到的数据设置到items和total中 this.items = [{id: 1, name: 'Option 1'}, {id: 2, name: 'Option 2'}]; this.total = 2; this.isLoading = false; }, 1000); }, handleCurrentChange(currentPage) { this.currentPage = currentPage; // 重新发送数据请求 this.fetchData(); } } } </script> ``` 在上面的代码中，我们使用`<el-select>`组件来展示下拉框，设置`filterable`属性为`true`表示启用搜索功能，设置`remote`属性为`true`表示启用远程搜索功能，然后使用`:remote-method`属性来绑定搜索方法`fetchData`。在`fetchData`方法中，我们可以使用`setTimeout`模拟异步请求数据的过程，并将获取到的数据设置到`items`和`total`中。同时，我们还使用了`<el-pagination>`组件来展示分页器，并使用`@current-change`事件来监听分页器页码的变化，然后重新发送数据请求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值