自定义滑动到底部触发指令,elementUI实现分页下拉框

在 main.js 中添加

js 复制代码
// 自定义滑动到底部指令
Vue.directive('selectLoadMore', {
  bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) {
        binding.value()
      }
    })
  },
})

使用

vue 复制代码
<el-select
  class="width-max"
  v-model="formValues.hpNumberArr"
  clearable
  filterable
  multiple
  reserve-keyword
  remote
  v-selectLoadMore="selectLoadMore"
  :remote-method="remoteMethod"
  placeholder="请选择表型匹配"
>
  <el-option
    v-for="user in phenotypeList"
    :key="user.id"
    :label="user.label"
    :value="user.value"
  >
  </el-option>
</el-select>
js 复制代码
// 下拉加载更多
selectLoadMore() {
  this.phenotypeSearch.pageNum = this.phenotypeSearch.pageNum + 1
  if (this.phenotypeList.length >= this.phenotypeSearch.totalPage) return
  this.readAllUsers() // 请求接口
},
// 远程搜索
remoteMethod(query, callback) {
  this.loading = true
  this.phenotypeSearch.cn = query
  this.phenotypeSearch.pageNum = 1
  this.phenotypeList = []
  callback && callback()
  setTimeout(() => {
    this.loading = false
    this.readAllUsers() // 请求接口
  }, 200)
},
// 获取数据
readAllUsers() {
  let params = {
    pageNum: this.phenotypeSearch.pageNum,
    pageSize: this.phenotypeSearch.pageSize,
    cn: this.phenotypeSearch.cn,
  }
  findListByConditionFun(params).then((res) => {
    this.phenotypeSearch.totalPage = res.data.totalRecords
    this.phenotypeList = this.phenotypeList.concat(
      res.data.data.map((i) => {
        return {
          id: i.id,
          value: i.hpNumber,
          label: i.cn,
        }
      })
    )
  })
},
相关推荐
前端开发呀1 分钟前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云枫晖5 分钟前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
文心快码BaiduComate6 分钟前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员
小白64029 分钟前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端
云和数据.ChenGuang14 分钟前
vue中构建脚手架
前端·javascript·vue.js
千与千寻酱20 分钟前
排列与组合在编程中的实现:从数学概念到代码实践
前端·python
q_191328469528 分钟前
基于RuoYi框架+Mysql的汽车进销存后台管理系统
数据库·vue.js·spring boot·mysql·汽车·个人开发·若依
朱昆鹏31 分钟前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能
wdfk_prog32 分钟前
klist 迭代器初始化:klist_iter_init_node 与 klist_iter_init
java·前端·javascript
cjinhuo34 分钟前
标签页、书签太多找不到?AI 分组 + 拼音模糊搜索,开源插件秒解切换难题!
前端·算法·开源