随笔47-在element-ui的select下拉框加上滚动触底事件

Posted 2023-03-17

参考技术A 1、在项目的main.js里注册
// 注册滚动条加载触发事件v-loadmore绑定

Vue.directive('loadmore', 

  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()

      

    )

  

)

----------------------------------------------------

v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听

scrollHeight 获取元素内容高度(只读)

scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

clientHeight 读取元素的可见高度(只读)

如果元素滚动到底, 下面等式返回true, 没有则返回false

scrollHeight - scrollTop === clientHeight

2.在需要的下拉地方写方法 如下图：

借鉴于 https://blog.csdn.net/weixin_30498921/article/details/95057744

element-ui使用select组件和tree组件实现下拉树形选择器

参考技术A

一个三级嵌套就可以搞定

网上的办法大多都是直接在option上写，给option加一个高度，然后overflow: auto，这样会有问题， 因为select本身使用的是element-ui自己的滚动条组件， max-height为274px，一旦option设置高度过大，会出现双重滚动条，而且原生滚动条真的有点丑，其实这里只需要给option加一个height: auto，就可以使用select自带的滚动条，不需要单独再加其他滚动。

发现两个问题

要解决几点

scrollToOption？拿来吧你

很明显，要传入一个option对象，而option的$el属性是一个dom，则表现形式就是一个Vue的实例，我这边直接用querySelector获取一个dom， 传入 $el: dom 也能用。再然后就是找这个dom，发现当树某一节点被点击时，其class会多一个is-current，那么就可以这样写：

ps: 只针对单选做的，多选还需按照情况改。