山东网站空间移动商城 网站建设方法方式

问题

ElementUI el-select多选下拉框，回显数据后无法重新选择和修改，点击选择和删除都没有反应，页面也没有报错

方案一

网上搜出来的基本上都是这个解决办法，但是我设置后没有生效，还是无法选择和修改

原因 下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新。

@change="$forceUpdate()"

添加位置如下

<el-select v-model="form.sourceOrg" style="width:100%" multiple placeholder="请选择所属应用" @change="$forceUpdate()"><el-optionv-for="item in appOptions":key="item.id":label="item.appName":value="item.id"/>
</el-select>

方案二（解决）

最后通过使用this.$set赋值解决了该问题

this.$set能够实现什么功能

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hello，ningzaichun'）

简单说即是：当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了

原来的赋值方式

this.form.sourceOrg = []
this.form.sourceOrgs.forEach(item => {this.form.sourceOrg.push(tem.appPriId)
})

改为

var as = []
this.form.sourceOrgs.forEach(item => {as.push(item.appPriId)
})
this.$set(this.form, 'sourceOrg', as)

修改后，解决此问题，回显数据后下拉框可以重新选择和修改