关于ElementUI,avue等vue的框架的select远程搜索数据回显以及视图更新问题
场景就是,我用avue的项目,想用组件写远程搜索,结果发现写了:dicUrl=”。。。。“,组件不识别,调不到接口,于是用,但是远程搜索又出现了问题:我第一次搜索,选中之后的数据可以正常显示,但是当我第二次搜索并选中时,第一次搜索之后选中的值就变成id了,查了查说是饿了么的bug,要更新版本才可以,但因为我们项目是avue的,avue里集成了elementui,只更新elementui是不好用的(
场景就是,我用avue的项目,想用<avue-select>
组件写远程搜索,结果发现写了:dicUrl=”。。。。“,组件不识别,调不到接口,于是用<el-select>
,但是远程搜索又出现了问题:我第一次搜索,选中之后的数据可以正常显示,但是当我第二次搜索并选中时,第一次搜索之后选中的值就变成id了,查了查说是饿了么的bug,要更新版本才可以,但因为我们项目是avue的,avue里集成了elementui,只更新elementui是不好用的(已经尝试过),于是想着更新avue,但是avue我们太久不更新了,所以更新会发生很多奇奇怪怪的事情(有小伙伴更过,含泪哭诉)。无奈的我想了想,想到了一个好办法,结合我们的业务场景,我把value和label都绑定了label,这样即使第一次的数据变成id了,也显示label,等传后端的时候,再解析一下数据,只传value(即id),然后和后台商量多加一个字段,专门存放我的label,回显问题也解决了。
这是其中一个问题,还有第二个问题,就是vue的视图更新方法,可谓是老生常谈,下面列了三个方法:
一、vue官方更新视图方式
this.$set(this.model,'key','123')
二、深拷贝方式
let dataModel = JSON.parse(JSON.stringify(this.dataModel))
dataModel[key].remoteOption = [...res.data.data]
this.dataModel = dataModel
三、设置一个key(这个方法不太常用,视场景而定)
注意那个key,绑定key,更新vue视图
<el-select
v-model="dataModel[m.id].esFieldSearchValue"
clearable
multiple
filterable
reserve-keyword
:key="dataKey"
remote
:remote-method="(query)=>{remoteMethodEs(query,m.id,'5',dataModel[m.id].esFieldDictCode)}"
@change="changeMethodEs($event,m.id)"
placeholder="请选择内容"
v-else-if="m.esFieldAssDict == '5'"
>
<el-option
v-for="one in dataModel[m.id].remoteOption"
:key="one.code"
:label="one.realName+'('+one.code+')'"
:value="one.realName+'('+one.code+')'">
</el-option>
</el-select>
定义变量
dataKey: new Date().getTime(),
change事件里,更新dataKey,即可变更视图
changeMethodEs(val,key) {
this.dataKey = new Date().getTime()
this.$set(this.dataModel[key],'esFieldSearchValue',val)
},
下面再说一个小点:
1.change事件,想传自己的参数,用$event
@change="changeMethodEs($event,m.id)"
2.:remote-method方法,想传自己参数,用$event 不行,可以用箭头函数,立即执行
:remote-method="(query)=>{remoteMethodEs(query,m.id,'5',dataModel[m.id].esFieldDictCode)}"
更多推荐
所有评论(0)