ElementUI el-select多选下拉框,回显数据后无法重新选择和修改

问题

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

ElementUI el-select多选下拉框,回显数据后无法重新选择和修改_第1张图片

方案一

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

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

@change="$forceUpdate()"

添加位置如下


  

方案二(解决)

最后通过使用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)

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

你可能感兴趣的:(ElementUI el-select多选下拉框,回显数据后无法重新选择和修改)