el-select内容滚动到最底部

vue:2.7.14   element-ui: 2.15.14  lodash: 4.17.21

<template>
  <el-select class="select" :value="selectedTags" @focus="focus" @blur="blur">
    <div ref="scrollContainer" v-loading="loading">
      <!-- 标签选项 -->
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </div>
  </el-select>
</template>

<script>
import { debounce } from 'lodash';
export default {
  name: "App",
  data() {
    return {
      selectedTags: null,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }, {
        value: '选项6',
        label: '北京烤鸭'
      }, {
        value: '选项7',
        label: '北京烤鸭'
      }, {
        value: '选项8',
        label: '北京烤鸭'
      }, {
        value: '选项9',
        label: '北京烤鸭'
      }, {
        value: '选项10',
        label: '北京烤鸭'
      }, {
        value: '选项11',
        label: '北京烤鸭'
      }, {
        value: '选项12',
        label: '北京烤鸭'
      }],
      loading: false
    };
  },
  methods: {
    handleScroll: debounce(function () {
      const container = this.$refs.scrollContainer.parentNode.parentNode;
      if (container.scrollTop + container.offsetHeight >= container.scrollHeight) {
        // 滚动到底部的操作
        console.log('已滚动到底部');
        // 这里可以进行数据加载、页面更新等操作
        this.loading = true;
        const timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer)
        }, 1000);
      }
    }, 50),
    focus() {
      this.$nextTick(() => {
        const container = this.$refs.scrollContainer.parentNode.parentNode;
        container.addEventListener('scroll', this.handleScroll);
      });
    },
    blur() {
      // 不要忘记在组件销毁前移除事件监听器,防止内存泄漏
      this.handleScroll.cancel;
      const container = this.$refs.scrollContainer.parentNode.parentNode;
      container.removeEventListener('scroll', this.handleScroll);
    }
  },
};
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值