el-select滚动到底部加载更多

原由

写这个指令主要是项目中有时候下拉框会有很多数据,一次性加载太多又太慢。

指令代码

import Vue from 'vue'
export default {}.install = (Vue, options = {}) => {
  Vue.directive('loadmore', {
    inserted(el, binding) {
      // 获取element-ui定义好的scroll盒子
      const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      SELECTDOWN_DOM.addEventListener('scroll', function() {
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
        if (CONDITION) {
          binding.value()
        }
      })
    }
  })
}

引用

在main.js中引入该文件。例如:

import loadMore from '@/directive/loadMore/loadMore' // 下拉加载更多
Vue.use(loadMore);

这样就能在全局使用该指令了

使用

	<el-select
		v-loadmore="这里是你自己定义的函数"
	>
		
	</el-select>
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在elementel-select组件中实现滚动加载更多,可以使用以下步骤: 1. 将el-select的popper-class属性设置为一个自定义类名,以便样式定制。 2. 在自定义类名的样式中,将popper的max-height设置为一个较小的值,以便在下拉列表中只显示部分选项。 3. 使用Vue的scroll事件监听器来检测下拉列表的滚动位置,并在滚动底部时触发加载更多数据的函数。 4. 在触发加载更多数据的函数中,将新数据添加到原来的选项列表中,并更新下拉列表的高度以显示所有选项。 以下是一个简单的示例代码: HTML模板: ```html <el-select v-model="selected" popper-class="my-popper" @visible-change="handleVisibleChange"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> ``` JavaScript代码: ```js export default { data() { return { selected: '', options: [], loading: false, page: 1, perPage: 10, } }, methods: { handleVisibleChange(visible) { if (visible && this.options.length === 0) { this.loadData() } }, loadData() { this.loading = true // 模拟异步加载数据 setTimeout(() => { const newOptions = [] for (let i = 0; i < this.perPage; i++) { const value = (this.page - 1) * this.perPage + i newOptions.push({ label: `Option ${value}`, value, }) } this.options = [...this.options, ...newOptions] this.page++ this.loading = false }, 1000) }, handleScroll(event) { const target = event.target const distance = target.scrollHeight - target.scrollTop - target.clientHeight if (distance < 10 && !this.loading) { this.loadData() } }, }, mounted() { this.$nextTick(() => { const popper = this.$refs.select.$refs.popper popper.addEventListener('scroll', this.handleScroll) }) }, beforeDestroy() { const popper = this.$refs.select.$refs.popper popper.removeEventListener('scroll', this.handleScroll) }, } ``` 在上面的代码中,handleVisibleChange方法用于在下拉列表显示时自动加载第一页数据,loadData方法用于异步加载更多数据,handleScroll方法用于监听下拉列表的滚动事件并在需要时触发加载更多数据的操作。在mounted钩子函数中,我们使用$refs获取下拉列表的popper元素,并添加scroll事件监听器。在beforeDestroy钩子函数中,我们移除scroll事件监听器以避免内存泄漏。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值