欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?element?el-select下拉滾動(dòng)加載的方法

 更新時(shí)間:2022年11月25日 15:09:54   作者:別拿曾經(jīng)看以后~  
很多朋友都遇到這樣一個(gè)問(wèn)題在使用vue+element的el-select下拉框加載返回?cái)?shù)據(jù)太多時(shí),會(huì)造成卡頓,用戶體驗(yàn)欠佳,這篇文章主要介紹了vue?element?el-select下拉滾動(dòng)加載方法,需要的朋友可以參考下

使用vue+element的el-select下拉框加載返回?cái)?shù)據(jù)太多時(shí),會(huì)造成卡頓,用戶體驗(yàn)欠佳,記錄一個(gè)滾動(dòng)加載的方法:
1、掛載一個(gè)全局的方法(main.js):

// 滾動(dòng)加載更多
Vue.directive('loadMore', {
  bind(el, binding) {
    // 獲取element,定義scroll
    let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    select_dom.addEventListener('scroll', function () {
      let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (height) {
        binding.value()
      }
    })
  }
});

2、demo設(shè)置(template結(jié)構(gòu))

<template>
  <el-form-item label="所屬分類(lèi)">
    <el-select
      v-model="curr"
      placeholder="分類(lèi)"
      @change="change"
      v-loadMore="loadMore"
      clearable filterable>
        <el-option
          v-for="item in list"
          :key="item.id"
          :label="item.name"
          :value="item.value">
         </el-option>
     </el-select>
  </el-form-item>
</template>

3、字段設(shè)置(data)

data(){
  return {
	curr:'', 
	names:[],
    list:[],
	pageData: {
      index: 1,
      size: 100
    },
  }
},

4、事件方法(methods)

methods:{
  // 加載更多
  loadMore() {
	this.pageData.index++;
	this.sceneData(this.pageData);
  },
  // 請(qǐng)求數(shù)據(jù)
  async sceneData(){
    let self=this
    this.names= []; // 清空
    let num = this.pageData.index * this.pageData.size;
    const {data,code,message}=await apiList({});
    if(code===0){
      self.names= data
      self.list= self.id.filter((item, index, arr) => {
	    return index < num;
      });
    }
  },
}

到此這篇關(guān)于vue element el-select下拉滾動(dòng)加載的文章就介紹到這了,更多相關(guān)vue element下拉滾動(dòng)加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論