解决element-ui中的el-select选择器无法显示选中内容的问题

最新推荐文章于 2024-08-06 17:23:10 发布
最新推荐文章于 2024-08-06 17:23:10 发布
阅读量1.2k 收藏 7
点赞数 7
分类专栏： 问题解决 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30298379/article/details/135700810
版权

问题描述：

排查方法：

检查数据控制台是否报错，无报错

检查change是否触发，会触发

最后开始百度，查看文档 

官方文档有这么一段话，就是属性一定要挂载到data上，不然无法检测。

最后解决：

排查到我的form表单，在定义表单属性的时候，没有在data中定义该字段。

总结：

要更新，一定检查你的字段是否在data对象上 

浮生小二
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element ui中下拉框选择后不显示值的问题
l1002670137的博客
02-15 2705
element ui下拉框选择后但不显示值
el-select下拉选择不回显问题和下拉框显示数字问题
szzlh123456789的博客
02-04 1985
在使用Vue开发使用element-ui时，el-select下拉框出现在点击选择的时候数据无法显示的问题。
element-plus el-select选择器无法选中显示的内容
wy271013的博客
05-07 534
函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重新render。今天使用element ui的下拉选择框组件时，发现选中了值却没有显示在框中。出现这个问题好像是因为下拉框数据是循环别的接口得来的，因为数据层次太多，在选中事件加上 this.$forceUpdate()强制刷新即可。
element-ui中的el-select选择器无法显示选中内容的问题
Mr_2612757的博客
03-09 485
element-ui中的el-select选择器无法显示选中内容的问题 解决问题的文章： https://blog.csdn.net/fish332/article/details/110280256?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-6&spm=1001.2101.3001.4242
vue2.0 element-ui中的el-select选择器无法显示选中的内容
sunday_tutu的博客
08-24 1万+
我使用的是element-ui V2.2.3。代码如下，当我选择值得时候，el-select选择器无法显示选中的内容，但是能触发change方法，并且能输出选择的值。 select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> ...
vue element-ui中的el-select选择器无法显示选中的内容
qq_42440919的博客
04-07 658
深入响应式原理 — Vue.js 检测变化的注意事项 由于 JavaScript 的限制，Vue不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。 对于对象 Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在data对象上存在才能让 Vue 将它转换为响应式的。例如： var vm = new Vue({ data:{...
Element-Ui中el-select选择后无法选中
Alone_Endeavor的博客
04-13 3459
由于Vue会在初始化实例时对属性执行getter/setter转换过程，所以属性必须在data中存在才能让vue转换它，这样才是响应式的，在我们开发项目过程中，多数情况下回用到element-ui中的select选择器，在开发过程中，会遇到这种情况，：使用Vue.js官方提供的vm.$forceUpdate()方法，该方法作用是迫使Vue实例重新渲染。具体来说就是在首次初始化之后，vue不会在进行加载渲染了，需要我们手动去执行渲染方法去重新加载它。受javascript的限制，vue。
Element-UI中Select选择器讲解（el-select详解）
热门推荐
辰兮要努力
11-22 9万+
本篇整理了el-select相关组件的基础用法，也正是这个组件，让我更加喜欢vue，更加喜欢element-ui，欢迎阅读学习，分享获取新知，大家一起进步。
element-ui中el-select与el-tree的结合使用实现下拉菜单
孔子说
12-14 6046
​转自http://kongzid.com/archives/em1, element-ui中el-select与el-tree的结合使用实现下拉菜单，安装ElementUI，Vue实现树型列表
Vue常见问题（一）组件的使用
最新发布
GLimerence的博客
08-06 171
内容解释：组件未定义，请确保你的组件已经定义了，另外可以理解成错误使用。报错的内容大致意思是：组件错误使用或者失效。
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 516
SignList这三个页面就是需要切换的页面。
Vue的所有面试题
qq_61132537的博客
08-06 370
在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。页面显示的数据和data中的数据已经保持同步了，都是最新的。
vue中openlayers过滤高亮显示某个图层
qq_61950936的博客
08-06 211
【代码】vue中openlayers过滤高亮显示某个图层。openlayers库没有直接支持这样设置，所以可以使用库：**ol-ext**，地址：[https://viglino.github.io/ol-ext/examples/filter/map.filter.crop.html](https://viglino.github.io/ol-ext/examples/filter/map.filter.crop.html)
vue（2）
weixin_64916888的博客
08-06 473
4，知识点总结跨域问题vue搭建管理系统element-ui入门axios的基本使用当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域前端访问地址后端服务地址出现：错误SM(sprinboot mybatis)如何解决跨域：解决跨域两种方式：jsonpCORS跨域资源共享( CORS（） ) 是一种基于HTTP标头的机制，它允许服务器指示除其自身之外的任何来源（域、方案或端口），浏览器应允许从中加载资源。
对于vue3ref和reactive的学习笔记
tian_liang_jia的博客
08-03 335
也是只能对浅层次的数据做一个响应式，只能相应到obj.xxx如果xxx属性是一个对象的话，就没有响应式了，但是它也和shallowRef一样，如果reactive一起使用的话，也会收到reactive的影响导致视图进行更新，更新的为最新数据。是一个浅层次的响应式，也就是它只能检测到vuale的变化，不能检测到value下的属性的变化。拷贝一份对象为仅读，但是原reactive的修改也会引起他的变化。注意，不可以和ref对象的值写在一起，否则也会触发更新。如果原始对象是响应式的是会更新视图并且改变数据的。
非负数（0和正数） 限制最大值且保留两位小数，在elementpuls表单中正则自定义验证传更多参数
qq_39536826的博客
08-06 75
非负数（0和正数） 限制最大值且保留两位小数，在elementpuls表单中正则自定义验证传更多参数
JavaScript和vue实现左右两栏，中间拖动按钮可以拖动左右两边的宽度
qq_40269801的博客
08-02 445
JavaScript和vue实现左右两栏，中间拖动按钮可以拖动左右两边的宽度
element-ui中的el-select选择器分页后如何回显
07-13
在element-ui中，el-select选择器分页后，要实现回显可以通过以下步骤： 1. 首先，你需要在el-select中设置一个v-model属性来绑定选择的值。例如： ``` <el-select v-model="selectedValue" :options="options"></el-select> ``` 这里的`selectedValue`是一个用于存储选择的值的变量，`options`是一个包含选项数据的数组。 2. 然后，你需要在分页切换时，将选择的值保存下来。你可以监听el-select的change事件，在事件处理函数中将选择的值赋给`selectedValue`。例如： ``` <el-select v-model="selectedValue" @change="handleSelectChange" :options="options"></el-select> ``` ``` methods: { handleSelectChange(value) { this.selectedValue = value; } } ``` 3. 当切换分页后，你需要根据之前保存的选择的值来设置el-select的选中状态。你可以通过给el-select设置一个`value`属性来实现。例如： ``` <el-select v-model="selectedValue" :value="selectedValue" :options="options"></el-select> ``` 这样，当分页切换后，el-select会根据`selectedValue`的值来自动选中对应的选项。 通过以上步骤，你就可以在el-select选择器分页后实现回显功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浮生小二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值