el-select数据太多页面卡顿问题

<template>

<div class="content">

      <el-select

        size="small"

        v-model="choose"

        placeholder="请输入搜索内容"

        clearable

        v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)"

      >

        <el-option

          v-for="(item, index) in list.slice(0, rangeNumber)"

          :key="index"

          :label="item.label"

          :value="item.value"

        ></el-option>

      </el-select>

    </div>

</template>

<script>

export default {

data() {

    return {

      list: [],//展示在下拉框内的数据

      choose: "",

      rangeNumber: 20

    }

  },

directives:{

    'el-select-loadmore':{

      bind(el, binding) {

        // 获取element-ui定义好的scroll盒子

        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');

        SELECTWRAP_DOM.addEventListener('scroll', function () {

          /**

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

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

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

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

              * ele.scrollHeight - ele.scrollTop === ele.clientHeight;

              */

         

          const condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop - SELECTWRAP_DOM.clientHeight;

          if (condition <= 10) {

            binding.value()

          }

        });

      }

    }

  },

created() {

    this.getList()

  },

methods: {

getList(){

      let arr = []

      for(let i = 0; i < 100000; i++){

        this.list.push({

          label: "数据" + i,

          value: "数据" + i

        })

      }

    },

    loadMore(n){

      //每次滚动到底部可以新增条数

      return () => this.rangeNumber += 5

    },

}

}

</script>