el-cascader级联选择器的搜索问题(有数据,但是没有搜索出来)

最新推荐文章于 2024-04-26 09:30:00 发布
最新推荐文章于 2024-04-26 09:30:00 发布
阅读量6.5k 收藏 5
点赞数 4
分类专栏： elementui vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42333170/article/details/103991055
版权

问题重现:
当我搜索贵州的时候,并没有显示贵州的公司出现
这是第一页的数据在这里插入图片描述
代码如下:
在这里插入图片描述
然后查看elementui文档,一脸懵
在这里插入图片描述
然后我就想通过自定义的搜索逻辑去看看,结果发现是一样的,还是没有。无奈之下,只能看源码了。
在这里插入图片描述
在这里插入图片描述
原来是过滤掉了
在这里插入图片描述
所以问题就出在这个checkStrictly,再回到elementui上

在这里插入图片描述在porps里加上这个checkStrictly属性,然后就出来了
在这里插入图片描述

Franky-
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-cascader级联选择器加载远程数据、默认开始加载固定条、可以根据搜索加载远程数据。
weixin_45803990的博客
07-31 2141
一组数组分页请求、默认请求20条数据。想添加远程搜索并调取接口。不能监听到用户清空数据的时候。这样搜索还是原来的数据。绑定的值是无法检测到用户自己输入的。目前自己想到的是这个解决办法。下面是个模拟的加载用户列表的。的时候重新加载下)。
element-UI的级联远程动态加载数据回显
socaicaicaicai的博客
08-11 1922
需求：省市区使用element-UI的级联组件实现省市区的动态加载选择以及数据的回显 // template <el-cascader :key="cascader" ref="cascader" :placeholder="请选择省市区" @change="changeAdress" style="width: 100%" v-model="provinces" :props="props" :options="province"
【element-plus】解决级联选择器el-cascader在懒加载模式 使用filterable无法搜索
最新发布
近10年前端开发工作经验，为你分享日常经验所得
04-26 908
解决cascader级联选择器在懒加载模式无法搜索的问题
el-cascader支持远程搜索功能实现
changyana的博客
08-19 1742
主要是在before-filter这里实现远程搜索功能。
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
coderYYY的博客
03-20 2万+
el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
el-cascader实现服务器搜索
weixin_42381896的博客
02-04 4382
el-cascader实现服务器搜索 文章目录el-cascader实现服务器搜索前言一、产品需求二、使用步骤1.基本使用2.解决用户实时输入问题3.数据过滤问题总结 前言 这里主要是记录开发过程中，因需要用到级联选择器，以及搜索功能，而官方文档未有服务器搜索的，所以这样记录一下，开发过程以及遇到的问题。 提示：以下是本篇文章正文内容，下面案例可供参考 一、产品需求 需要根据用户输入的进行实时请求服务器数据 二、使用步骤 1.基本使用 代码如下（示例）： <el-cascader
关于element-ui级联选择器输入框节点获取不到，undefined，null等问题
weixin_47945635的博客
01-06 1127
级联选择器输入框节点获取不到，undefined，null等问题。模糊搜索时就全乱套了。
uniapp-cascader
11-14
《uniapp-cascader：构建灵活的级联选择器》 在移动应用开发领域，uniapp因其跨平台的特性及丰富的组件库，逐渐成为开发者们的首选工具之一。本篇文章将聚焦于uniapp的一个特定组件——uniapp-cascader，一个用于...
country-data:基于elementUI的Cascader 级联选择器的城市数据
05-14
在这个特定的案例中，"country-data"是一个基于ElementUI的Cascader级联选择器实现，用于展示城市级别的数据。 Cascader组件在网页设计中常用于处理层级关系的数据，如国家-省份-城市这样的地理信息，或者部门-团队...
Element Cascader 级联选择器的使用示例
10-15
9. **级联选择器的响应式**：由于 Vue 的特性，当 `options` 数据改变时，Cascader 会自动更新显示的内容，无需额外操作。 在实际开发中，Element Cascader 可以方便地与其他 Element UI 组件结合使用，构建出复杂...
ele-multi-cascader:ElementUI-based 多选级联选择器
05-10
由于elementUI 的级联选择器暂不支持多选，因此基于elementUI开发此组件，所有的样式class都是使用 elementUI 原样式，基本可无副作用的引入项目使用，有任何问题欢迎发布 issue，我会在看到第一时间回复大家。...
vue el-cascader添加远程搜索方法
weixin_51409195的博客
04-02 733
核心：1、使用before-filter，在此处编写处理的逻辑代码。3、@input.native使用input事件编写搜索框未输入需要展示的数据的逻辑。4、@change中编写，所选项清空时的逻辑。3、@change的方法（处理点击自带x标志删除所选项后的代码，与filterable联用时）//计算中文字节,原需求添加大于2个汉字时才发起搜索请求。1、:before-filter的方法代码。2、@input.native的方法代码。//此处编写搜索自负为空时的代码逻辑。placeholder="请选择"
Element el-cascader 级联选择器详解
热门推荐
程序员大阳
09-01 3万+
本文目录1. 概述2. 数据绑定2.1 默认数据绑定 1. 概述 级联选择器用途比较广泛，例如选择人员所属的单位，可以从总公司-分公司-部门-子部门这样级联选择下来。 如果自己去实现一个级联选择器，实际上是难度较大的，Element提供了一个功能相当完善的级联选择器，本篇文章就进行一个详细的介绍。 2. 数据绑定 2.1 默认数据绑定 级联选择器默认会绑定一个数组，节点的显示文本和值分别对应label、value属性，节点的后代对应children属性。示例代码如下： 默认数据绑定,选中值{{value}
el-cascader自定义搜索功能before-filter
weixin_43773218的博客
09-16 6702
即不能用自带的搜索功能，决定自定义搜索功能，在el-cascader的输入框中根据输入的字符，通过后端接口去查做了区分的数据。需求：因为数据有重复名字的数据，但code是不相同的，就是虽然是相同名字，但其实是不同数据,又不能在原数据上直接做出区分。尝试了几次也不知道哪里出了问题，反正都不行。官方文档中，有关于自定义搜索功能的描述。当时在做这个的时候，网上搜出来的都是用。但回显的时候，还是回显到原数据上。将异步的接口请求改为同步方法，以及。
elementUI最新版的el-select使用filterable无效无法匹配正确搜索结果的Bug解决办法
陈小翔的博客
07-01 5273
项目场景： 下拉框搜索有问题 问题描述： 今天做开发时遇到一个elementUI存在的bug。 当el-select使用filterable功能搜索时，如果你恰巧使用的是微软拼音输入法，那么你有可能会遇到搜索结果和输入的值不匹配，如下图： 我输入的是黄金，结果却显示有双皮蛋，龙须面。 原因分析： 打开https://element.eleme.cn/#/zh-CN/component/select 定位到【可以利用搜索功能快速查找选项】 切换成微软拼音输入法 点击搜索下拉框输入“黄金”，确认输入时
el-cascader模糊搜索时getCheckedNodes()获取不到选中的节点
qq_43765727的博客
08-30 1309
把getCheckedNodes()改为改为getNodeByValue()
vue element Cascader级联选择器（记录可搜索多级下拉）
梁小桐
07-13 1694
【效果】 【代码】 <template> <el-form :inline="true" size="small"> <el-form-item label="封装分类"> <el-cascader placeholder="搜索封装分类" v-model="treeValue" :options="treeTable" @change="handleChange" ...
elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？
小陈的博客
05-26 1万+
如果有同学还没用过这个功能，可以先了解下： 使用场景 大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。 解决方法 现在的 elementPlus 已经有虚拟化选择器了，直接使用，非常方便，如果你使用的是Vue3，可以直接移步 elementPlus官方文档 如
el-cascader级联选择器
08-16
C知道：el-cascader级联选择器是一个基于Element UI的组件，用于实现级联选择功能。它可以在多级选项中进行选择，并且支持自定义选项、异步加载选项、禁用选项等功能。 要使用el-cascader级联选择器，您需要在Vue组件中引入Element UI库，并在模板中使用el-cascader组件。以下是一个简单的示例： ```html <template> <el-cascader v-model="selectedOptions" :options="options" placeholder="请选择" @change="handleCascaderChange" ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], options: [ { value: '1', label: 'Option 1', children: [ { value: '1-1', label: 'Option 1-1', children: [ { value: '1-1-1', label: 'Option 1-1-1', }, { value: '1-1-2', label: 'Option 1-1-2', }, ], }, { value: '1-2', label: 'Option 1-2', }, ], }, ], }; }, methods: { handleCascaderChange(value) { console.log(value); }, }, }; </script> ``` 在上述示例中，我们使用`v-model`来绑定已选择的选项，`options`属性定义了级联选择器的选项列表。当选择发生变化时，`@change`事件会触发`handleCascaderChange`方法，并打印选择的值。 您可以根据自己的需求进行配置和使用el-cascader级联选择器。如果您有更具体的问题或需求，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值