element select 两种条件搜索过滤

最新推荐文章于 2023-09-05 15:12:58 发布
最新推荐文章于 2023-09-05 15:12:58 发布
阅读量596 收藏
点赞数 1
分类专栏： vue 文章标签： 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44046951/article/details/125373328
版权

在这里插入图片描述
如图所示，可对工号或者姓名进行搜索。
文档中有提到 filter-method 自定义搜索方法。
尝试了一下。
后发现，其搜索是根据label进行过滤。
于是将绑定的label进行修改
在这里插入图片描述
这样也可以进行多条件搜索。
在这里插入图片描述

在这里插入图片描述
只是最后的选择框会显示成下面的样子
在这里插入图片描述
value-key 绑定的 userId, 返回的 item 没有影响
在这里插入图片描述

狗狗狗狗亮
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【web前端】可筛选[输入搜索]的select
da宗熊专栏
09-26 1万+
基于jquery, 带筛选，可搜索的 select 插件。与 select 元素无缝结合，最大程度上，保证 select 的原生性。兼容 ie7 及 以上浏览器
扩展 Entity Framework支持复杂的过滤条件(多个关键字模糊匹配)
10-27
总结来说，在处理需要多个关键字模糊匹配的复杂过滤条件时，可以通过使用`Union`或Linq表达式扩展这两种方法来简化问题的解决方案。使用`Union`方法简单直观，但可能不够高效；而利用Linq表达式进行扩展则更为高效和...
笔记：el-select 多条件搜索
passerby_lin的博客
08-11 426
options2为需要房子el-select下面的el-option使用。2.filter-method 自定义筛选方法。options为用来filter的数组。options2和options值一样。1.el-select开启。
el-select多个时，el-select筛选选中过的值，第二个el-select中过滤上一个选中的值
weixin_41346436的博客
06-01 1249
代码
用jQuery实现搜索框的过滤效果
weixin_30583563的博客
03-25 253
遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box").on('click','i',function(){//在check-value上动态添加无效,因为check-value也是动态添加上的 $(this).parent().remove();...
vue element-ui slelect实现过滤简拼搜索
qq_42739199的博客
04-15 387
1.安装依赖包 npm install pinyin-match --save 2.文件引入 import PinyinMatch from 'pinyin-match' 3.新建copyCustomer复制一份customer 4.创建PinyinMatch方法 PinyinMatch(val){ if(val){ let result = [] this.copyCust...
【JavaScript源代码】Element-ui 自带的两种远程搜索(模糊查询)用法讲解.docx
12-28
【JavaScript源代码】Element-ui 自带的两种远程搜索(模糊查询)用法讲解 在前端开发中，有时候我们需要实现一种称为前端远程搜索或模糊查询的功能。Element-ui，一个流行的Vue.js组件库，提供了两种实现这一功能的...
vue搜索和vue模糊搜索代码实例
10-17
之后可以根据这两个值进行组合搜索，通过逻辑判断组合不同的搜索条件。 ### 数据源的确定性 在文件内容中，提到了使用`this.$store.state.chufang.alldata`作为数据源。这表明使用了Vue的状态管理库Vuex来管理全局...
在vue+element ui框架里实现lodash的debounce防抖
10-16
在Vue.js和Element UI的开发中，有时候我们需要优化用户输入事件的处理，特别是对于实时搜索或过滤数据的情况。这时，lodash的`debounce`函数就能派上用场，它可以帮助我们实现防抖(debounce)功能，避免频繁触发昂贵...
ui组件之input多选下拉实现方法（带有搜索功能）
09-02
在UI设计和开发中，Input多选下拉框是一种常见的交互元素，它允许用户在下拉选项中选择多个值，并通常提供搜索功能以便用户更快地找到所需选项。以下将详细介绍如何实现这样的组件。 1. **HTML 结构**： HTML 结构...
vue+elementUI el-select 自定义搜索逻辑（filter-method）
最新发布
sumimg的博客
09-05 3545
下拉列表的默认搜索是搜索label显示label,我司要求输入id显示label名称。使用filter-method方法筛选数据。首先mounted加载数据。
element下拉框的自定义筛选
lxiang222的博客
07-07 8142
在element框架中的el-select标签的子标签el-option中需要绑定两个属性，分别是label和value，通常我们对接接口和页面展示的内容是不同的，label是用于显示于页面中的内容，例如我们要实现一个下拉框，是否已婚：然后下拉框分别对应的值为是和否，选中是就传参数flag=1，否就flag=0，因此我们的在绑定el-option的属性时就应当，绑定label为是否，value为1...
el-select 自定义搜索方法:filter-method 多种方式搜索结果
Kyiiiii的博客
06-08 3394
el-select filter-method 自定义搜索方法
＜ element组件封装： element表格（element-table）实现表格列筛选功能组件 ＞
一个平平无奇的技术宅
06-30 4082
在 Vue + elementUi 开发中，element表格本身仅自带升序和降序排列，可能在日常开发中，不太能满足自定义筛选的要求，比如说，实现excel文档中的筛选个例的功能，今天小温就把这个干货给大家分享一下。本篇文章简单展示！ 案例仅供参考！话不多说，先上效果图！ 白嫖万岁！当然，如果有帮助，希望不要吝啬你的点赞呀！......
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
热门推荐
coderYYY的博客
03-20 2万+
el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
element select 下拉及输入筛选
u014722196的博客
03-19 398
el-select @change=“refreshData” v-model=“queryParams.companyId” filterable :filter-method=“filterMethod” placeholder=‘请选择’>
elementUI el-table表头中添加条件过滤（类似下拉框）
weixin_43228909的博客
09-11 1万+
最近公司项目中有这样的需求，就是在el-table的表头中加入一个类似下拉框的筛选功能，如图所示：。 最开始的想法是使用自定义表头进行修改，后来在elementUI文档Table表格中看到有筛选的功能，在列中设置filters、filter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value,...
使用elementUI组件实现表格的分页以及搜索功能
m0_69983788的博客
08-09 1万+
使用elementUI组件实现表格的分页以及搜索功能，主要的UI组件：el-input、el-table、el-pagination
使用element-ui el-select 做下拉 全选+搜索 功能
酱子
11-01 6752
有时候，需要用到下拉列表 全选和搜索，并且鼠标放入的时候有下拉列表展示，以前的做法是 check + el-input搜索结合做个组件，现在这个方法直接使用el-select 就能做到这个需求功能：有搜索+有全选+有取消+有确认请求+有鼠标移入自动展示功能。使用element-ui el-select 做下拉 全选+搜索 功能。
用 element ui select控件 实现远程搜索
07-22
可以使用 Element UI 的 Select 控件结合远程搜索功能来实现。下面是一个简单的示例代码： ```vue <template> <div> <el-select v-model="selectedValue" remote filterable remote-method="remoteSearch" :loading="loading" :remote-method="remoteSearch" :loading-text="'Searching...'" :no-match-text="'No matching results'" :value-key="'value'" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </div> </template> <script> export default { data() { return { selectedValue: '', loading: false, options: [] }; }, methods: { remoteSearch(query) { this.loading = true; // 发起远程请求，根据 query 获取匹配的数据 // 假设远程请求返回的数据格式为 [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }] setTimeout(() => { // 模拟异步请求 this.loading = false; this.options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' } ]; }, 1000); } } }; </script> ``` 上述代码中，我们使用了 `remote` 属性来开启远程搜索的功能，通过 `remote-method` 属性指定了远程搜索的方法名 `remoteSearch`。在 `remoteSearch` 方法中，你可以发起异步请求，根据用户输入的 `query` 参数获取匹配的数据，并将结果赋值给 `options` 数组。同时，我们使用了 `loading` 属性来展示加载状态。 这样，当用户在 Select 控件中输入内容时，会触发 `remoteSearch` 方法进行远程搜索，并根据搜索结果动态更新下拉选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值