【elemenui】el-select下拉加载更多

凌晨一点的猫lx

已于 2024-02-02 00:26:59 修改

阅读量613

点赞数 4

文章标签： vue.js 前端 javascript elementui

于 2024-02-02 00:24:13 首次发布

本文链接：https://blog.csdn.net/qq_44092391/article/details/135984167

版权

【elemenui】el-select下拉加载更多

场景

当elemenui 的el-select的下拉框数据过多时，点击下拉框的时候，很明显能感觉到el-select非常卡顿，这时候可以通过下拉加载更多数据的思路来实现，也就是页面初始加载时，可以少给些数据，当用户滚动下拉框列表触底时，再加载更多的时候，就是分批往下拉框里面塞数据，这样就可以解决当数据量过多时，el-select卡顿的问题了

实现

主要是要要绑定ref 和 loading

  <el-select
            ref="geneSelect"
            :loading="loading"
            class="select-space"
            v-model="geneFeatures"
            placeholder="please select gene"
            @change="switchUmapGene(geneFeatures)"
          >

            <el-option
              v-for="(item) in sliceGeneOptions"
              :label="item['label']"
              :value="item['value']"
              :key="item['value']"
            >
    </el-option>

因为我的数据是本地存储，并没有接口请求，所以我用了2个变量
另外需要注意的是，无论你是从请求获取的数据还是本地数据，就是初始给到下拉框的数据，需要下拉框出现滚动条才可以

data(){
	return{
	   loading: false,
       noMore: false,
		geneOptions:[],//存储下拉框总的数据，这里本人就不提供示例数据了
		sliceGeneOptions:[
        {
          "label": "A1C",
          "value": "A1C"
        },
        {
          "label": "A2C",
          "value": "A2C"
        },
        {
          "label": "A3C",
          "value": "A3C"
        },
        {
          "label": "A4C",
          "value": "A4C"
        },
        {
          "label": "A5C",
          "value": "A5C"
        },
        {
          "label": "A6C",
          "value": "A6C"
        },
        {
          "label": "A7C",
          "value": "A7C"
        },
        {
          "label": "A8C",
          "value": "A8C"
        },
        {
          "label": "A9C",
          "value": "A9C"
        },
        {
          "label": "A10C",
          "value": "A10C"
        },
      ],//初始渲染下拉框，存储小的数据量的,
	}
}
methods:{
//加载更多数据的逻辑
 async loadMore(){
      if(this.loading) return
      this.loading = true
      let options = this.geneOptions.slice(this.sliceGeneOptions.length,this.sliceGeneOptions.length + 4)//从总的数据里面取出4条，也就是加载4条，想要滚动一次加载多少条数据，根据实际场景修改
      this.sliceGeneOptions = this.sliceGeneOptions.concat(options) //把新加载的数据和下拉框原本的数据做个合并
      this.timer = setTimeout(()=>{
        this.loading = false
      },500)

      if(this.geneOptions.length === this.sliceGeneOptions.length){ //当下拉框里面的数据长度等于总的数据时
        this.$refs.geneSelect.$refs.scrollbar.$refs.wrap.removeEventListener('scroll',this.scolling())
        this.noMore = true
      }
    },
    //判断是否el-select是否滚动到底部的逻辑
     scolling(){
      let e = this.$refs.geneSelect.$refs.scrollbar.$refs.wrap
      if(this.noMore) return
      // 到底时触发 loadMore
      let loadMore = e.scrollHeight -  e.scrollTop -5 < e.clientHeight

      if(loadMore){
        this.loadMore()
      }
    },
}，
mounted(){
//监听滚动
  this.$refs.geneSelect.$refs.scrollbar.$refs.wrap.addEventListener('scroll',this.scolling)
}