前端业务开发中不管使用vue2~3,还是react,angular各种前端技术栈,经常会遇到这种业务。一个下拉框Select中,不仅需要需要支持远程模糊搜索,还需要支持多选。并且在编辑时,还能正常把已经多选好的内容回显到Select中。 用Vue3+ElementPlus+TS举一个简单的案例。其他技术栈思路是一致的 ...
1、el-select懒加载 el-select选择器里的数据通过后端返回得到,这里返回了将近两万条数据,点开选择器页面就特别卡,所以最好采用懒加载方法,具体使用如下: 控件部分: <el-select v-model="form" placeholder="" v-el-select-loadmore="loadmore" //懒加载方法 > <el-option v-for="item in dataItems" :ke...
<script lang="ts"setup>letselectValue=ref([]);letoptions=ref<{value:string;label:string;}[]>([]);constremoteMethod=(value:string)=>{// 模拟远程接口查询// 一般远程模糊搜索的接口都带分页,如果数据为10万条,模糊搜索时肯定一次不能查10万条,还是需要正产分页的setTimeout(()=>{options.value=[...
前端业务开发中不管使用vue2~3,还是react,angular各种前端技术栈,经常会遇到这种业务。一个下拉框Select中,不仅需要需要支持远程模糊搜索,还需要支持多选。并且在编辑时,还能正常把已经多选好的内容回显到Select中。 用Vue3+ElementPlus+TS举一个简单的案例。其他技术栈思路是一致的 ...
script directives:{//注意:这个是写到data外面'el-select-loadmore':{bind(el,binding){constSELECTWRAP_DOM=el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTWRAP_DOM.addEventListener('scroll',function(){constcondition=this.scrollHeight-this.scrollTop<=this.clientHeightif(condition...
/** * el-select加载事件(可用于做select的无限滚动) * 使用方法(两种方法,推荐第2种): * 1. 查询方法自定义(远程搜索也需要自定义): * v-load-more.method="function(){}" * 2. 传入url就可实现无限滚动和远程搜索,要求接口分页参数为“pageSize”和“pageNo”: * v-load-more...
<el-select v-model="selectedValue" :virtual-scroll="true"> <!-- options --> </el-select> 异步加载选项:如果选项数据量很大,可以考虑使用异步加载选项的方式,只在用户需要时再加载选项。可以使用el-select提供的remote属性和remote-method方法来实现。 <el-select v-model="selectedValue" :remote="true...
el-select设置远程搜索后在移动端的ios软键盘无法调起,```html```jsclear(async){this.$nextTick(()=>{if(!async){//ios手机有延迟问题setTimeout(()=>{const{headerSearchSelect}=this.$refs;con
体验el-select的远程搜索功能 需求描述 没有什么技术难度,需求如下,要求上来默认加载几个选项,然后根据用户的输入,实时更新选项,且支持用户新增。(请看gif) 解决方案 首先要找到了el-select组件,然后里面有一个远程搜索功能。 官方文档:https://element-plus.org/zh-CN/component/select.html...