关于vxe-select得filter-method 自定义方法得使用

已于 2023-05-06 16:04:19 修改
阅读量2.3k 收藏 2
点赞数 2
分类专栏： 工作笔记 文章标签： javascript 学习
于 2022-12-13 09:01:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cainiaoyaya/article/details/128296314
版权

用vxe-select得filterable属性得时候 发现不能大小写一起搜索

所以用到filter-method得使用

1，在组件中加入filter-method属性

2.自定义方法

 （1）官网给得解释

（2）返回值是布尔值

每次在输入框输入一个字符得时候 该函数就会执行该下拉框绑定得数组得长度次

打印出参数发现第一个和第二个参数分别是 {当前输入得字段，遍历得数组得项}

如果返回true 就会把绑定得数组所有得项都返回 

如果在函数中返回false 就返回0项

所以只需要控制当前输入得字段 和 遍历得数组得项 按照某种规则对比 符合返回true 不符合返回false即可

makamkamakbakSOSO
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
vxe-table-plugin-menus::deciduous_tree: 基于 vxe-table 的表格插件，提供实用的快捷菜单集
04-13
vxe-table-plugin-menus 基于 的表格插件，提供实用的快捷菜单集 Installing npm install xe-utils vxe-table@next vxe-table-plugin-menus@next // ... import VXETable from 'vxe-table' import ...
el-select利用自定义filter-method筛选数据
最新发布
Judith_p的博客
04-23 559
根据原本filterable属性无法实现拼接后的模糊搜索 所以需要借助filter-method。
el-select 自定义搜索方法:filter-method 多种方式搜索结果
Kyiiiii的博客
06-08 3154
el-select filter-method 自定义搜索方法
el-table如何实现筛选功能，以及filters,filter_method详解
热门推荐
m0_51312071的博客
05-20 1万+
在 ElementUI 的 el-table 组件中，提供了一个 el-table-column 组件的 filters 属性，可以用于对表格数据进行筛选操作。在 ElementUI 的 el-table 组件中，el-table-column 组件的 filters 属性确实是用于定义筛选菜单的选项列表。在上面的代码中，我们在 data 函数中定义了筛选菜单和表格数据，当用户选择某个筛选菜单项后，filterMethod 函数会根据选项的值对表格数据进行过滤，只保留符合条件的行。
vxe-table表格中使用vxe-select选择器被遮挡
HXH1019的博客
03-29 495
如你所见，我已经激活了下拉选择器，然后我想要选择的内容被遮挡住了。注意style标签不应加上scoped属性，否则可能无效。首先这种情况一般发生在弹窗中嵌入vxe-table表格。文档中中的解决办法是加上transfer属性。在表格所在的Vue文件下方加上以下样式。我按照文档设置了，结果是无效的。
element ui table 单位格条件过滤后请求接口(filter-method、filter-change)
qq_44146522的博客
04-19 1998
【代码】element ui table 单位格条件过滤后请求接口(filter-method、filter-change)
vue3.0中使用Element-Plus中Select下的filter-method属性
H_jrqn的博客
03-02 4339
vue3.0中使用Element-Plus中Select下的filter-method属性
vxe-tablevue表格解决方案 v2.9.15
08-14
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代...
vxe-table vue表格解决方案源代码
03-15
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
vxe header 下拉框 vxe-select 被遮挡
qq_51972119的博客
08-28 1186
官方示例中给出了一种vxe-select在表格中的使用，但是实际上由于存在于表头中使用的需求，因此有被表头遮挡的可能性存在。在overflow中，被设置为hidden。显然，这就是设置不可超出父元素的关键，hidden改成visible即可。...
vxe-table 筛选渲染filter-render 自定义组件
wanghanlu_的博客
05-26 3788
3.1在main.js文字中导入vxetableRenderer.js文件。1.创建vxetableRenderer.js文件。2.创建filterModal.vue文件。3.2在你的列配置中使用。
使用vxe-table遇到的问题
anqiaoyun的博客
11-27 788
使用vxe-table时遇到的问题
element UI cascader组件 filter-method实现大小写模糊搜索
ResignJUN的博客
10-13 4935
采用自定义搜索逻辑filter-method <el-cascader v-model="selectedOptions" :options="arrList" clearable filterable :filter-method="dataFilter" /> dataFilter(node, val) { console.log('val', v.
el-table筛选数据
Pert的博客
08-02 4692
el-table
vue实现下拉框 模糊搜索+不区分大小写 (用到了el-select)
qq_41775006的博客
12-23 5446
效果图 <el-form-item label="国家" prop="country"> <el-select v-model="dataForm.country" style="width:300px" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMetho
vue+elementUI el-select 自定义搜索逻辑（filter-method）
sumimg的博客
09-05 3085
下拉列表的默认搜索是搜索label显示label,我司要求输入id显示label名称。使用filter-method方法筛选数据。首先mounted加载数据。
vxe-select
09-22
vxe-select是一个基于Vue.js的表格组件中使用的选择器。在使用vxe-select时，遇到的问题是编辑最后一行时选择弹框会撑开表格，使用体验比较差，需要往上滚动或者有时候根本选择不到选项。根据官方文档的提示，可以使用transfer属性来解决这个问题。例如，在vxe-select标签上添加transfer属性：<vxe-select v-model="row.isUploadStr" :transfer="true">。这样设置后，弹框会脱离表格的父容器，并且可以正常选择选项。 如果以上方法依然无法解决问题，可以尝试修改相关样式。可以在页面上添加以下样式来不使用transfer：<style> .vxe-select--panel { position: fixed !important; min-width: 10% !important; left: auto !important; } </style>。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值