场景就是,我用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)}"
Logo

前往低代码交流专区

更多推荐