推广 热搜: 红书  page  数据  数据分析  关键词  搜索  小红  哪些  考试  论文 

elementplus可搜索的下拉框 element下拉框远程搜索

   日期:2024-12-26     移动:https://sicmodule.kub2b.com/mobile/quote/13533.html

是一个下拉框,输入关键字时,从接口中读取关键字匹配,不输入时,下拉框不出现。

效果图如下:

 若后端将全部数据都返回给前端了,前端又使用的是element框架,那么只需要在下拉框组件中加上   filterable  属性即可,其他功能可查看属性需要自行添加

 

template

Select的属性

clearable:是否可以清空选项,默认值是:false。作用:可以一键清空

elementplus可搜索的下拉框 element下拉框远程搜索

multiple:是否多选,默认值是:false。作用:可以选择多个

filterable:是否可搜索,默认值是:false。作用:为了启用远程搜索,需要将和设置为,同时传入一个。为一个

remote:是否为远程搜索,默认值是:false。作用:为了启用远程搜索,需要将和设置为,同时传入一个。为一个

reserve-keyword:多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词,默认值是:false。作用:保留关键字(我觉得可以不要)

:remote-method="getAttenderList":远程搜索方法函数:getAttenderList

:loading="receiversLoading":是否正在从远程获取数据,初始值receiversLoading为false,当receiversLoading为true时,则是加载中的状态

 

option的属性

v-for="item in attenders":在attenders里循环,item为具体的对象

:key="item.id":循环必须要写的唯一标志,这个的值为item里id键的值

value:选项的值,是存给el-select里的v-model的值。根据具体要求,可存id也可存字段,或者是id与字段的拼接值。主要看后端的需求。

:value="item.mail":选项的值为item里mail键的值

label:选项的标签,若不设置则默认与 下拉框显示的具体内容

:value="item.mail":选项的标签为item里mail键的值

 

远程搜索方法函数:getAttenderList(写在methods里),其实就是在调接口的时候传一个keyword,这个方法是后端写的,因为后端并没有把全部数据返回到前端,因此前端不可以进行模糊搜索,只能将关键字传给后端,由后端实现搜索。

第三行是传参,pageSize表示,下拉框显示多少条数据。page应该是表示:显示第几页,这里只能写1

 

代码没有写全,包括import接口,receiversLoading,attenders等的初始化,在哪里调用这个函数:getAttenderList


本文地址:https://sicmodule.kub2b.com/quote/13533.html     企库往 https://sicmodule.kub2b.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


0相关评论
相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号