赞
踩
首次修改后正常,但是第二次或者多次修改后,el-select不显示选中的项目。在input框内不显示输入的内容。
关键代码(表单的某两项):
绑定的值为form表单绑定值aiForm下的值extConfig对象下面的值
- <el-form-item label="更多配置:">
- <el-select v-model="aiForm.extConfig.defectSizeType"
- placeholder="请选择defectSizeType"
- style="width:100%;margin-bottom:10px"
- clearable
- filterable
- multiple
- collapse-tags>
- <el-option v-for="item in sizeTypeOptions"
- :key="item.value"
- :label="item.label "
- :value="item.value">
- </el-option>
- </el-select>
- <el-input v-model="aiForm.extConfig.defectLength"
- placeholder="请输入defectLength"
- type='number'
- style="width:100%"></el-input>
- </el-form-item>
- </el-form>
- var vm = new Vue({
- el:'#rrapp',
- data:{
- aiForm:{
- extConfig: {
- extConfig: 'extConfig',
- defectSizeType: [],
- defectLength: ''
- }
- },
- sizeTypeOptions: [{
- value: 'A',
- label: 'A'
- }, {
- value: 'C',
- label: 'C'
- }, {
- value: 'EE',
- label: 'EE'
- }, {
- value: 'G',
- label: 'G'
- }],
- })
el-select和el-input选择器,当绑定值为嵌套比较深的值时,容易出现无法显示选中内容的问题。但是只是在页面上没有选中的UI,实际上选中的内容是绑定上的。
使用自带组件实例$forceUpdate()
- //只用在 el-select、el-input上绑定分别绑定 @change、@input事件 使其触发forceUpdate
- <el-form-item label="更多配置:">
- <el-select v-model="aiForm.extConfig.defectSizeType"
- placeholder="请选择defectSizeType"
- style="width:100%;margin-bottom:10px"
- clearable
- filterable
- multiple
- collapse-tags
- @change="$forceUpdate()">
- <el-option v-for="item in sizeTypeOptions"
- :key="item.value"
- :label="item.label "
- :value="item.value">
- </el-option>
- </el-select>
- <el-input v-model="aiForm.extConfig.defectLength"
- placeholder="请输入defectLength"
- type='number'
- style="width:100%"
- @input="$forceUpdate()"></el-input>
- </el-form-item>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。