element el-select下拉选择问题
程序员文章站
2022-06-19 12:47:33
el-select下拉选择无效问题描述:在使用Vue开发使用element-ui时,el-select下拉框出现在点击选择的时候数据无法显示的问题。
el-select下拉选择无效
问题描述:
在使用Vue开发使用element-ui时,el-select下拉框出现在点击选择的时候数据无法显示的问题。
<el-select v-model="dialogForms.approvalPhase" placeholder="阶段查询">
<el-option v-for="item in trainApprovalPhase" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
解决方案:
需要使用forceUpdate强制刷新,有两种解决方案:-
在没有绑定事件时直接在change上绑定forceUpdate:
<el-select v-model="dialogForms.approvalPhase" placeholder="阶段查询" @change="$forceUpdate()"> <el-option v-for="item in trainApprovalPhase" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" ></el-option> </el-select>
-
在已绑定事件时,需要再change方法里添加forceUpdate:
<el-select v-model="dialogForms.approvalPhase" placeholder="阶段查询" @change="changelabel()"> <el-option v-for="item in trainApprovalPhase" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" ></el-option> </el-select>
changelabel(){ this.$forceUpdate(); }
本文地址:https://blog.csdn.net/Hello_oll/article/details/112528650
下一篇: 饿了么怎么设置关闭小额免密支付?
推荐阅读
-
详解element-ui设置下拉选择切换必填和非必填
-
Element-ui 下拉列表 选项过多时通过自定义搜索来解决卡顿问题
-
详解element-ui日期时间选择器的日期格式化问题
-
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
-
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
-
element编辑表单el-radio回显之后无法选择的问题解决
-
解决element-ui中下拉菜单子选项click事件不触发的问题
-
浅谈Vue Element中Select下拉框选取值的问题
-
解决select 下拉框选择器 input输入框 、时间日期选择器el-date-picker 赋值后,出现无法修改选中更改问题
-
详解element-ui中el-select的默认选择项问题