确保回显: 只要selectedValue中的值在options列表中存在,并且el-select组件的v-model正确绑定到了selectedValue,那么这些值就会自动回显在el-select组件中。 通过以上步骤,你就可以在Vue项目中使用Element Plus的el-select组件实现远程搜索和搜索结果回显功能了。希望这对你有所帮助!
前端业务开发中不管使用vue2~3,还是react,angular各种前端技术栈,经常会遇到这种业务。一个下拉框Select中,不仅需要需要支持远程模糊搜索,还需要支持多选。并且在编辑时,还能正常把已经多选好的内容回显到Select中。 用Vue3+ElementPlus+TS举一个简单的案例。其他技术栈思路是一致的 ...
},methods: {// 远程搜索方法,数据太多,不能直接渲染remoteMethod(query) {if(query !=='') {this.relationList= []this.loading=true// 这个方法可以做下节流处理,不需要一输入就发起请求,这里偷懒没有写getDiagnoseInfo({diagnoseName: query }).then(res=>{this.loading=falsethis.relationList= res.filt...
所以最终解决方法为:在拿到数据后执行下面代码 // 注意 我的例子中label绑定的为userName, value绑定的为item;// :label="item.userName" :value="item"// selectedList为后端返回的选中的回显数据// 这段代码根据你们绑定的字段进行修改selectedList.forEach(item=>{this.$refs.selectDom.cachedOptions.push({cu...
element-plus 的 el-select 远程搜索如何更好地回显数据? 我知道以下的方式可以进行回显数据。 const customerOptions = ref([]) ... customerOptions.value.push({ id: formData.id, name: formData.name }) 但是,首次点击的时候,会弹出下拉框并展示这条数据。 目前网上的解决方案都是,获取 el-select 的 re...
* 回显还有另一种用法,就是给options设置初始值,初始值内容为需要回显的内容 * searchField:(非必传)远程搜索用的字段,不传则不能实现远程搜索; * 要求接口支持和el-select开启搜索(filterable,并重置自定义搜索方法(:filter-method="()=>{}")) ...
对vue不怎么熟悉,之前都是生成的模板el-select的回显没有出现问题。 但是在一个页面,使用了ajax搜索结果作为select的值以后,且格式化了要显示的内容,回显就出现问题了 网上搜了一下解决方案,加那个cacheoption的问题,在我这里无效。 后来,经过朋友指点,双向绑定的值,需要类型一致。把结果打出来一下,果然类型不一致。
编辑数据的时候需要回显下拉数据,我们只需要获得其值,vue会自动帮我们循环查询然后回显。先看看问题。 原下拉数据(orderTypeId 为我们需要的值 是字符串类型) 编辑 后台给我们返回的数据(serveId为数字类型) 后台修改完类型后 总结:el-select下拉数据回显 查询和编辑的数据类型要统一就可以... 查看原文 vue懒加载...
使用了懒加载方式解决了el-select下拉框数据量过大导致页面卡顿的问题,但是又会出现另外一个问题,就是当数据回显时,数据还没加载,下拉框只会回显Id值,不会显示名称label值。 针对这个问题...要在这个方法前插入到数组,最好这样。 这样解决完这个问题了。 。。。但是随之而来又伴随另一个问题,就是你往这个数组...
前端业务开发中不管使用vue2~3,还是react,angular各种前端技术栈,经常会遇到这种业务。一个下拉框Select中,不仅需要需要支持远程模糊搜索,还需要支持多选。并且在编辑时,还能正常把已经多选好的内容回显到Select中。 用Vue3+ElementPlus+TS举一个简单的案例。其他技术栈思路是一致的 ...