前端业务开发中不管使用vue2~3,还是react,angular各种前端技术栈,经常会遇到这种业务。一个下拉框Select中,不仅需要需要支持远程模糊搜索,还需要支持多选。并且在编辑时,还能正常把已经多选好的内容回显到Select中。 用Vue3+ElementPlus+TS举一个简单的案例。其他技术栈思路是一致的 ...
<script lang="ts"setup>letselectValue=ref([]);letoptions=ref<{value:string;label:string;}[]>([]);constremoteMethod=(value:string)=>{// 模拟远程接口查询// 一般远程模糊搜索的接口都带分页,如果数据为10万条,模糊搜索时肯定一次不能查10万条,还是需要正产分页的setTimeout(()=>{options.value=[...
let selectValue = ref([]); let options = ref< { value: string; label: string; }[] >([]); const remoteMethod = (value: string) => { // 模拟远程接口查询 // 一般远程模糊搜索的接口都带分页,如果数据为10万条,模糊搜索时肯定一次不能查10万条,还是需要正产分页的 setTimeout(() => {...
问题: 解决方法: 在数据初始化的时候将获取到的数据做进一步的处理,进行本地select组件的一个添加 constlabels = [];constvalues = []; res.data.rows.forEach((ele) =>{ labels.push(ele.buildName); values.push(ele.buildCode); });this.$refs.select.cachedOptions= labels.map((label, index) =>...
/** * el-select加载事件(可用于做select的无限滚动) * 使用方法(两种方法,推荐第2种): * 1. 查询方法自定义(远程搜索也需要自定义): * v-load-more.method="function(){}" * 2. 传入url就可实现无限滚动和远程搜索,要求接口分页参数为“pageSize”和“pageNo”: * v-load-more...
在el-select远程搜索中会有个回显问题 就是明明传入了绑定值但是却会显示不出来 解决代码如下 在数据初始化的时候将获取到的数据做进一步的处理,进行本地select组件的...
element-plus 的 el-select 远程搜索如何更好地回显数据? 我知道以下的方式可以进行回显数据。 const customerOptions = ref([]) ... customerOptions.value.push({ id: formData.id, name: formData.name }) 但是,首次点击的时候,会弹出下拉框并展示这条数据。 目前网上的解决方案都是,获取 el-select 的 re...
element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决的方案。 但是有时候这种方法对我并能够不适用,因为这样会出现回显问题,回显的时候是还需拿到所需option; 我的做法 element-ui的select有一个fildter-method方法,我们可以通过这个方法来进行过滤下拉项 ...
在select组件获焦但未远程搜索时,下拉选项会有选项出现,就是我们刚刚添加的两项,下面再提供一种方法 2.看源码理解组件是如何渲染的 先前使用给$res.selectDom.selected赋值 $res.selectDom.selected.push({ currentLabel: **, currentValue: { userId: **, ...