elementUI 使用 el-select 的远程搜索功能,导致数据无法回显怎么解决?

如果有同学还没用过这个功能,可以先了解下:

在这里插入图片描述

使用场景

大部分情况下使用 el-select 的时候,el-options 中 options 的值都是后端接口给的数据,直接赋值就可以了。但是有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,不仅请求全量数据接口的时候时间会很久,而且赋值完之后整个页面会非常卡。

解决方法

现在的 elementPlus 已经有虚拟化选择器了,直接使用,非常方便,如果你使用的是Vue3,可以直接移步 elementPlus官方文档

如果你使用的是 Vue2,很可惜没有现成的组件能够使用。解决方法一共两个,都是需要后端配合前端进行修改的:

  • 后端将接口改为分页的形式;前端将选择器下拉框中的数据改为滚动加载
  • 后端将接口改为模糊搜索的形式,通过选择器中输入的内容去搜索模糊匹配的数据然后返回;前端使用 elementUI 中选择器的
  • 7
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值