前端业务开发中不管使用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="()=>{}"))
element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决的方案。 但是有时候这种方法对我并能够不适用,因为这样会出现回显问题,回显的时候是还需拿到所需option; 我的做法 element-ui的select有一个fildter-method方法,我们可以通过这个方法来进行过滤下拉项 ...
编辑数据的时候需要回显下拉数据,我们只需要获得其值,vue会自动帮我们循环查询然后回显。先看看问题。 原下拉数据(orderTypeId 为我们需要的值 是字符串类型) 编辑 后台给我们返回的数据(serveId为数字类型) 后台修改完类型后 总结:el-select下拉数据回显 查询和编辑的数据类型要统一就可以... 查看原文 vue懒加载...
对vue不怎么熟悉,之前都是生成的模板el-select的回显没有出现问题。 但是在一个页面,使用了ajax搜索结果作为select的值以后,且格式化了要显示的内容,回显就出现问题了 网上搜了一下解决方案,加那个cacheoption的问题,在我这里无效。 后来,经过朋友指点,双向绑定的值,需要类型一致。把结果打出来一下,果然类型不一致。
前端业务开发中不管使用vue2~3,还是react,angular各种前端技术栈,经常会遇到这种业务。一个下拉框Select中,不仅需要需要支持远程模糊搜索,还需要支持多选。并且在编辑时,还能正常把已经多选好的内容回显到Select中。 用Vue3+ElementPlus+TS举一个简单的案例。其他技术栈思路是一致的 ...