Element / Select下拉框 / 动态加载数据 + 远程搜索

本文介绍了在Element UI的Select组件中如何实现动态加载数据和远程搜索功能。在实现过程中遇到了下拉框数据未刷新的问题,并提供了两种解决方案:在下拉框获得焦点时重置选项,或者在clear回调事件中重置选项。参考链接提供了更多细节。
摘要由CSDN通过智能技术生成
动态加载数据:

ElementUI没有给Select提供动态加载数据的api,需要自己写一个自定义指令:

// directives/lodemore.js
export default {
   
  bind(el, binding) {
   
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
   
      
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (CONDITION) {
   
        binding.value()
      }
    })
  }
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值