ui 组件下拉框 踩坑

已于 2022-05-05 20:45:13 修改
阅读量657 收藏
点赞数
文章标签： elementui
于 2022-05-02 13:29:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41678534/article/details/124539875
版权
本文探讨了在Vue应用中使用UI组件（如Ivew和Element UI）实现远程搜索下拉框时遇到的问题及解决方案。关键在于理解`filterable`、`remote`、`remote-method`和`loading`属性，并注意到在远程搜索方法中，输入值的变化不会自动绑定，需要通过自定义方法处理输入参数来实现动态查询。
摘要由CSDN通过智能技术生成

ui 组件下拉框 踩坑

需要实现的需求：

要求企业信息 可以 输入字符串远程接口去匹配符合要求的企业列表

解决问题：

想到很多ui组件下拉框可以实现远程搜索

部分代码：

在这里插入图片描述
之前用的ivew组件，后面改为饿了么ui，其实都一样，定义属性：filterable（是否可搜索）、remote（是否为远程搜索）、remote-method（自定义远程搜索）、loading（是否正在从远程获取数据）

在远程搜索方法中想直接用v-model的值去查询，其实是不行，因为第一次查询之后，你去改变输入框的值，他并没有绑定到对应的值，需要用自定义方法自己中会传入一个参数，而这个参数正是我们输入框中输入的值，用这个值作为条件去查询。

濒危动物。
关注
elementui下拉框不回显_解决element-ui的下拉框有值却无法选中的情况
weixin_30558137的博客
12-29 2487
问题描述：在使用Vue框架和element-ui开发时，下拉框遇见一个问题，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。(踩坑踩得莫名其妙)代码段：解决方法：出现这个问题好像是因为下拉框数据是循环掉别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重...
elementui 清空下拉框值_解决element-ui的下拉框有值却无法选中的情况
weixin_32861907的博客
01-13 3006
问题描述：在使用Vue框架和element-ui开发时，下拉框遇见一个问题，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。(踩坑踩得莫名其妙)代码段：解决方法：出现这个问题好像是因为下拉框数据是循环掉别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重...
Ui自动化之下拉框
weixin_45433224的博客
03-29 834
下拉框用到Select类
解决u-list滚动时会卡顿几次的问题
javaltt的博客
08-15 1755
解决u-list滚动时的问题
elementUI最新版的el-select使用filterable无效无法匹配正确搜索结果的Bug解决办法
陈小翔的博客
07-01 5658
项目场景： 下拉框搜索有问题 问题描述： 今天做开发时遇到一个elementUI存在的bug。 当el-select使用filterable功能搜索时，如果你恰巧使用的是微软拼音输入法，那么你有可能会遇到搜索结果和输入的值不匹配，如下图： 我输入的是黄金，结果却显示有双皮蛋，龙须面。 原因分析： 打开https://element.eleme.cn/#/zh-CN/component/select 定位到【可以利用搜索功能快速查找选项】 切换成微软拼音输入法 点击搜索下拉框输入“黄金”，确认输入时
Element-ui组件踩坑记录
weixin_40400844的博客
02-26 916
Element-ui组件踩坑记录-继续踩坑继续记录1.组件交互页面抖动：出现问题：解决方法：2.组件属性：出现问题：问题原因：解决方法：3.组件样式修改：出现问题：问题原因：解决方法：4.select下拉框：出现问题：问题原因：解决方法： 1.组件交互页面抖动： 出现问题： 组件操作时，页面会出现抖动情况，文字会模糊； 解决方法： 1）Checkbox 多选框切换： .el-checkbox__inner::after { transition: none!important; } 2）表单验证信息出
element-ui表格组件table踩坑总结
热门推荐
草巾冒小子的博客
08-29 1万+
table组件中，基本情况简述： element框架的table组件，内容涵盖以下总结知识点，内容比较基础，知识有点交叉。对比学习更易于理解、应用和掌握。 常用知识点： table边框设置（行边框、全边框） tr鼠标悬停样式（斑马条纹、highlight）、点击展开tr td文字溢出处理与提示、td鼠标悬停提示 tr含有radio、checkbox的table表格（单选 、多选...
vue+mint-ui 下拉组件loadmore踩坑
daily886的博客
11-17 7948
mint-ui是vue开发中常用的组件库，而loadmore 通常用于处理下拉加载与上拉加载 坑1、页面渲染完，loadmore设置的上拉/下拉执行两次 产生原因：loadmore设置中的auto-fill需要设置为false 实现代码如下： <load-more :bottom-method="loadBottom" :bottom-all-loaded="isLoadAll" r...
Ant Design UI组件之Select踩坑
weixin_34292959的博客
02-27 1170
Ant Design UI组件之Select踩坑 前言 在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结中在使用Select中几种容易常见的问题，持续更新 遇到的问题 在初始化Select值,如何根据value显示对应文本 实现代码如下 ... this.props.form.setFieldsVal...
Element-UI踩坑之Pagination组件的使用
10-17
在使用Element-UI提供的Pagination组件时，用户可能会遇到一些常见的问题或者说是“坑”，这些通常与分页组件的使用逻辑和数据处理有关。以下是对Element-UI Pagination组件使用的深入解读。 首先，Pagination组件...
computed拦截v-model
前端很杂，故名前端杂货铺 —— coderkey
10-28 346
computer如何巧妙拦截v-model？会不会打破单项数据流？
vue 果蔬识别系统百度AI识别vue+springboot java开发、elementui+ echarts+ vant开发
roccreed的专栏
10-28 738
基于vue+java和百度API的果蔬识别系统，前后端分离+可视化+H5移动端适配
elementUI table 多级表头隔行变背景颜色
M40153c的博客
10-29 367
如 rowIndex == 0， columnIndex == 1 的意思为多级表头的第一行中的第二列 指在上效果图中。如 rowIndex == 1， columnIndex == 2 的意思为多级表头的第二行中的第三列 指在上效果图中。其中rowIndex == 0 意思为多级表头的第一行，columnIndex == 0 意思为某一行的第一列。
ssm基于vue框架和elementui组件的手机官网+vue
weixin_44832324的博客
10-28 1217
通过对手机官网的开发，让我深刻明白开发一个程序软件需要经历的流程，当确定要开发一个手机官网的程序时，我在开发期间，对其功能进行合理的需求分析，然后才是程序软件的功能的框架设计，数据库的实体与数据表设计，程序软件的功能详细界面实现，以及程序的功能测试等进行全方位的细致考虑，虽然在此过程中，各个环节都遇到了大大小小的困难，但是通过对这些问题进行反复的分析，深入的思考，借助各种相关文献资料提供的方法与解决思路成功解决面临的各个问题，最后成功的让我开发的手机官网得以正常运行。
硅谷甄选（11）角色管理
最新发布
weixin_74428381的博客
10-31 309
props：属性： label：指定节点标签为节点对象的某个属性值 children:指定子树为节点对象的某个属性值。获取已分配权限的id，这里我们只需要收集最后一层的id即可，因为组件会自动更具最后一层的选择情况决定上层的选择状况。还是熟悉的组件：el-card、el-table 、el-pagination、el-form。default-checked-keys：默认勾选的节点的 key 的数组。node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。:model：要校验的数据。
硅谷甄选（9）SKU模块
weixin_74428381的博客
10-31 259
注意：在这里切换页码和切换每页数据条数的回调不同是因为：它们都能对函数注入数据，切换页码注入的是点击的页码数，因此我们可以直接使用getHasSku作为他的回调。切换每页数据条数注入的是切换的页码条数，我们希望切换后跳转到第一页，因此使用handler，间接调用getHasSku。其实现在看来这部分模块做的事情就是我们前端人的一些缩影。思路不难，难在琐碎的工作中要处理的各种各样的东西。更新按钮这里没有业务。2：对数据结构的理解（可以将请求回来的数据放到正确的位置上）3：element-plus组件的使用。
硅谷甄选（三）登录注册
weixin_74428381的博客
10-29 769
修改使用规则rules使用自己编写的函数作为规则校验。//定义表单校验需要的配置对象//规则对象属性:/* {required: true, // required,代表这个字段务必要校验的min: 5, //min:文本长度至少多少位max: 10, // max:文本长度最多多少位message: '长度应为6-10位', // message:错误的提示信息。
硅谷甄选（10）用户管理
weixin_74428381的博客
10-31 290
个人觉得这里的批量删除有个小bug，假设所有数据都可以删除的话，那么把最后一页的数据都删除掉，会使得页面跳转到当前页而不是前一页。你会发现，此时你的token存储在本地存储里面，所以是有的，username存储在仓库里面，所以刷新就没了。这也是之前说的仓库存储的问题。实现原理：函数会将勾选与否注入到val中，如果是，就将全部数据（allRole）赋值给选中的数据（userRole），选中的数据通过v-model实现页面的同步变化。表格绑定的data是要显示的数据，item项的prop也是要展示的数据。
element ui select组件 下拉框样式如何更改
03-29
可以通过以下方法更改 Element UI Select 组件下拉框的样式： 1. 使用 CSS 样式覆盖 Element UI 的默认样式 通过给 Select 组件添加自定义的 CSS 样式来改变其下拉框的样式，例如： ```css .el-select-dropdown {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值