element-ui解决select无法回显
问题描述
解决方法
element-ui多个select回显成功,但是选中无反应
解决方案
总结
element-ui解决select无法回显 问题描述给的是value的值,没有正常显示lable中的值,是因为当select中只赋值了value没有赋值lable的值时,系统会默认将value和lable共用。
我们在绑定数值时value=“1” 是绑定的字符串,所以下面重新将value 赋值为2,同时lable也默认成2,就显示了2.
方法:使用**:value=“1”**就可以回显。
<el-select v-model="moreForm.isVip" placeholder="奖励会员" style="width:100%">
<el-option label="普通会员" value="0"></el-option>
<el-option label="vip" value="1"></el-option>
<el-option label="vvip" value="2"></el-option>
</el-select>
getUserInfor(row) {
this.moreForm.isVip = row.isVip;
},
解决方法
<el-select v-model="moreForm.isVip" placeholder="奖励会员" style="width:100%">
<el-option label="普通会员" :value="0"></el-option>
<el-option label="vip" :value="1"></el-option>
<el-option label="vvip" :value="2"></el-option>
</el-select>
element-ui多个select回显成功,但是选中无反应
在使用el-select 组件出现一个小问题,对成功回显后的数据,再次进行添加,选框中没有更新,但是提交表单,实际数据是更新的。怀疑可能是视图层没有更新,组件化框架类似问题。
原因 下拉框数据是循环别的接口得来的,因为数据层次太多,render函数没有自动更新,需手动强制刷新
解决方案添加 @change="$forceUpdate()" 强制更新视图
<el-select v-model="form.roleIds" multiple placeholder="请选择" @change="$forceUpdate()">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.roleName"
:value="item.id"
:disabled="item.status == 1"
></el-option>
</el-select>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持软件开发网。