element 表格全局筛选（筛选结果请求后端接口）

（一）问题描述

element官网例子，表格筛选如下图。
官网链接：https://element.eleme.cn/#/zh-CN/component/table

如果你的表格分页了，那么这个筛选只能筛选当页的数据，原因是我门从接口得到的数据只有当页的。此时，我们要做全局筛选，即选择一个筛选条件，请求接口，接口返回给你本页的所有符合条件的数据。

为什么做全局筛选？
如果纯前端筛选，在本页数据就没有符合条件的数据时，筛完之后，表格为空。但是，符合这个条件的数据在其他页面有啊。感觉就像没有符合这个筛选条件的数据一样。

前后端结合的全局筛选，向后端发送筛选条件之后，后端把所有符合条件的都返回。

（二）实现步骤

1. `el-table` 中添加 `@filter-change="handleFilterChange"`

<el-table :data="tableData" class="my-table" @filter-change="handleFilterChange"
>

2. `el-table-column`中添加`column-key="给这一列取一个唯一标识"`

<el-table-column:key="item.id":prop="item.id":label="item.name"column-key="keyStatus">
</el-table-column>

3. 筛选

handleFilterChange(val) {//参数val是你选择的筛选条件//把这个筛选条件通过接口传给后端，让后端去筛
},

//有错误，请指正，接受批评，万分感谢。

element 表格全局筛选（筛选结果请求后端接口）相关推荐

vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
uni-app请求后端接口和请求
后端接口是第三方涉及跨域问题,由于我自己没有后台服务器,无法采用cors进行设置响应头,所以采用和vue原理一样的nginx代理例如要请求的地址是http://ceshi3.dishait.cn/a ...
解决微信小程序请求后端接口碰到合法域名的问题 http-405j及java接口和数据接口的概念区分
合法域名的问题 http-405 解决方案: @Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse res ...
Java_定时请求后端接口数据发送RabbitMQ消息到指定MQ服务器
RabbitMQ入门参考博客:http://m.blog.csdn.net/article/details?id=50487028(内含介绍.环境配置及基本实现说明) RabbitMQ官方文档参考,发 ...
VUE - get 、post 请求后端接口：get 、post 写法（Axios 中文说明文档地址）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Axios 中文使用说明文档地址:Axiox 中文说明文档我只是记录下写法,两种请求都能正常运行: ...
小程序请求后端接口步骤
一:新建一个项目填写自己申请过得小程序的appid,勾选不使用云服务. 二:准备一个免费的接口这种免费的接口网上有很多,但是基本都不太稳定,过了一段时间都没有办法技术使用,基本都会挂,所以啊,一定 ...
activiti自定义属性并请求后端接口问题
最近做工作流,把小小心得写下来,希望对大家有用! 一.添加属性到modeler 首先找到文件stencilset.json并添加如下节点: 其中propertyPackages表示的就是这个task的 ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
获取后端接口请求中的参数(@PathVariable，@RequestParam，@RequestBody区别，使用postman请求
获取参数 SpringBoot提供的获取参数注解包括:@PathVariable,@RequestParam,@RequestBody,三者的区别如下表: 一:后端接口什么都不加 postman请求后 ...

element 表格全局筛选（筛选结果请求后端接口）

目录

（一）问题描述

（二）实现步骤

1. `el-table` 中添加 `@filter-change="handleFilterChange"`

2. `el-table-column`中添加`column-key="给这一列取一个唯一标识"`

3. 筛选

element 表格全局筛选（筛选结果请求后端接口）相关推荐

最新文章

热门文章

element 表格全局筛选（筛选结果请求后端接口）

目录

（一）问题描述

（二）实现步骤

1. el-table 中添加 @filter-change="handleFilterChange"

2. el-table-column中添加column-key="给这一列取一个唯一标识"

3. 筛选

element 表格全局筛选（筛选结果请求后端接口）相关推荐

最新文章

热门文章

1. `el-table` 中添加 `@filter-change="handleFilterChange"`

2. `el-table-column`中添加`column-key="给这一列取一个唯一标识"`