Element下拉框选择后不显示勾选

最新推荐文章于 2025-05-19 10:45:22 发布
最新推荐文章于 2025-05-19 10:45:22 发布
阅读量1.6k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： Element 开发遇到的bug 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42919799/article/details/123116105
博客探讨了在ElementUI下拉选项框中遇到的问题，即选择数据后界面未回显选中状态。问题源于接口循环获取数据导致的层级过深，进而影响了Vue的render函数更新。手动刷新能暂时解决问题。解决方案是优化数据结构和更新机制，确保组件能正确响应数据变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

bug样式

image-20220224170007368

问题出现的原因

根据别人文档的了解，是由于弹出层中的数据是通过循环调用接口得到的，嵌套的层级过深导致，当点击选项数据后render 函数没有自动更新，通过手动的刷新可以解决问题

我自己的解决方案

image-20220224170353528

image-20220224170429242

借鉴的文档

ElementUI 下拉选项框选择数据后不回显选中

bootstrap-select多选赋值，解决下拉菜单下所有选项全没有打勾的问题
peppa_pig的博客
10-24 1576
bootstrap-select文档：http://silviomoreto.github.io/bootstrap-select/ 刚开始我赋值是这样写的， $('#kjghjbxx_ghbzdw').selectpicker('val', obj.bzdw); 显示效果是这样的， 看样子好像并没有什么问题，但是再点开看看就成了这样： 好像有些不对，百度了一波然后发现赋...
element ui根据下拉框值动态显示table的表头列
weixin_43258184的博客
12-23 1266
data里定义一个对象，key是表头名称，value是下拉框的选项，代表选择哪一项的时候展示这个表头字段。 const colList = { 表头列1: ['选项1', ], 表头列2: ['选项1', '选项2', '选项3', '选项4'], 表头列3: ['选项2', '选项3', '选项4'], 表头列4: ['选项1', '选项2'], } data里声明currentEventName: ‘当前选择项’ 在table里定义表头： <el-table-column v-
vue2.0 element-ui中的el-select选择器无法显示选中的内容
weixin_30721077的博客
04-23 2720
我使用的是element-ui V2.2.3。代码如下，当我选择值得时候，el-select选择器无法显示选中的内容，但是能触发change方法，并且能输出选择的值。 select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> &...
使用程序给下拉选项赋值后，下拉框没有勾选
最新发布
u014642921的博客
05-19 313
ElementUI下拉框选择后不显示值
qq_41504815的博客
04-09 4305
问题：使用elementUI的下拉选择框，点击后正常赋值，但下拉框不显示内容 <el-select v-model="courseInfo.subjectId" placeholder="二级分类" @change="handleChange"> <el-option v-for="subject in subSubjectList" :key="subject.id" :label="subject.title"
VUE复选框打印不显示选中对勾问题
2301_77055885的博客
05-13 665
VUE复选框打印不显示选中对勾问题。
element-ui中select下拉框，选择后赋值成功，但是框上不显示的坑
weixin_30469895的博客
08-17 1万+
这个是今天遇到一个坑，因为也是第一次使用vue+element-ui开发，所以记录一下自己遇到的一些问题。 这个问题是在开发省市区三级联动组件的时候遇到的，具体的情况如下发的gif图，虽然解决了问题，但是还是没有懂是为什么这样，有人说是element的bug，不过我觉得不像，可能是用法的问题吧，希望知道原因的博友们可以告知，现在先上下代码； 1.首先address.json的格式是： [ { ...
基于Element的组件改造的树形选择器(树形下拉框)
10-15
在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`<el-select>`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...
element 组合下拉框和勾选框
09-18
组合下拉框和勾选框可以用于在用户界面中选择元素的方式。下拉框是一种常见的用户界面元素，可以展示一个下拉菜单，用户可以从中选择一个选项。勾选框则是一种复选框，允许用户选择一个或多个选项。 在某些情况下，...
写一个vue 和 element-ui 点击el-select下拉框出发el-tree勾选的代码
04-05
v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> export default { data() { return { selected: '', options: [ { label: 'Option 1',...</script>
vue el-select 下拉框选择后,不显示
weixin_39891473的博客
12-13 3076
问过度娘后得知, 是因为数据层数太多, render函数没有更新,在select 里添加以下代码。使用forceUpdate手动强制刷新。
ElementUI中的el-table实现多选框不勾选的提示
BADAO_LIUMANG_QIZHI的博客
08-04 1576
场景 ElementUI中的el-table怎样实现多选与单选： https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/107769640 在上面实现多选和单选的基础上，实现如果不勾选就点击某按钮时给予提示。 注： 博客：https://blog.youkuaiyun.com/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先在页面上添加多选或者单选框 ...
element Select 选择器 回显options未选中
weixin_51052286的博客
07-25 632
select回显option未被选中
关于element中选择框不回显，做了联动，选择不上，选了其他 的就显示出来了
weixin_47194802的博客
05-26 450
还有一个简单粗暴的方法，就是，给这个表单加个v-if,每一次change触发，让他为false,再为true。就是你的选择器每次选完就能强制刷新。原因就是，嵌套太深，监听不到！
element-ui组件select选择器无法显示选中的内容的问题记录
你好，欢迎光临！
12-17 1459
这里写自定义目录标题问题描述发现解决办法原因 问题描述 element-ui组件表单中某个select选择器无法显示选中的内容的，其他的select，都可以，就新添加的不行。 发现 网上查找之后，找到下面链接的解决办法，升级版本的省略，强制this.$set()方法也不行， https://segmentfault.com/q/1010000009295579 后来发现，是在data()中没有初始...
解决element-ui中的el-select选择器无法显示选中内容的问题
fish332的博客
11-28 1万+
解决element-ui中的el-select选择器无法显示选中内容的问题
elementPlus checkbox 多选框 点击无法选中
qq_48779484的博客
11-23 1358
点击选择框 无法勾选
element- ui , el-select 多选，选择后自动关闭下拉框
热门推荐
Shimeng_1989的博客
10-26 1万+
情景： 单选选中之后再次打开，不会定位到当前下拉勾选项位置，但多选可以，所以用多选代替单选框，每次替换所选的值，实现单选的效果（但是下拉框不自动关闭），如图： 单选（打开）： 多选（打开）： ......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值