el-select如何优化超大数据不卡顿

          <el-form-item
            style="width:100%"
            label="单位"
          >
            <el-select
              v-model="lngcustomerid"
              v-selectloadmore:rangeNum="loadMore(rangeNum)"
              style="width:100%"
              clearable
              filterable
            >
              <el-option
                v-for="item in customerErpList.slice(0,rangeNum)"
                :key="item.lngcustomerid"
                :value="item.lngcustomerid"
                :label="item.strcustomername"
              />
            </el-select>
          </el-form-item>

　　

export default{

  directives: {
    'selectloadmore': {
      bind: function(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 = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (condition) binding.value()
        })
      }
    }
  },
data(){
  return{
        lngcustomerid:'',
        customerErpList:[],//假设customerErpList是一个几千甚至上万条的数据
        rangeNum: 20 
}  
}，
methods:{
   //写法一
    loadMore(n) {
      // eslint-disable-next-line
      return () => this.rangeNum += 5
    },
   //写法二
    loadMore(n){
                var self = this
                return function() {
                    self.rangeNum += 5
                    return self.rangeNum
                 }
    },
    //写法三
 　　　　loadMore(n) {
     　　　　 return () => {
       　　　　 this.rangeNum += 5
        　　　　return this.rangeNum += 5
     　　　　 }
   　　 },
}
}  

　注：

   以上方法适用于无搜索的情况下，

   如果有搜索要求则存在问题：（1）因为第一次截取的数据是前20条，所以搜索时只能搜这20的数据，之后的搜不到  （2）同样因为是初次只截取的数据是前20条，所以新增后比如选择了比较靠后的一条数据保存后，编辑查看时只能显示id值，而不是label值

所以如果要求搜索建议使用下面的方法

 

方法二：

<el-form-item prop="lngcustomerid" label="供应商">
        <el-select
            v-model="saveInfo.lngcustomerid"
            v-el-select-loadmore:rangeNum="loadMore(rangeNum)"
            style="width: 260px;"
            clearable
            :filter-method="searchTextFunc"
            filterable
            @visible-change="showOptions"
          >
            <el-option
              v-for="item in stashList.slice(0,rangeNum)"
              :key="item.treedataid"
              :value="item.treedataid"
              :label="item.treedatacodeandname"
                />
        </el-select>
 </el-form-item>

export default {
  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 = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (condition) binding.value()
        })
      }
    }
  },
  data() {
    return {
      rangeNum: 20,
      searchText: '',
      stashList: [],
      editSelectId: 0
    }
  },

    computed: {

      ...mapGetters([

        'customerList'

      ])

    },

    mounted() {

      this.$store.dispatch('common/getCustomerList').then(() => {

        this.stashList = this.customerList

      })

    },

  methods: {
    loadMore(n) {
      // eslint-disable-next-line
        return () => this.rangeNum += 5
    },
    searchTextFunc(newVal) {
      if (newVal) {
        this.stashList = this.customerList
        this.stashList = this.stashList.filter(item => {
          if (item.treedatacodeandname.includes(newVal)) {
            return item
          }
        })
      } else {
        this.stashList = this.customerList
      }
    },
    showOptions(v) {
      if (v) {
        this.stashList = this.customerList
        this.searchText = ''
      }
    }，
    //查看的时候处理数据：循环比较将已经选择的数据插到stashlist中
    examine(){

          if (this.editSelectId) {

              var o = []

              if (this.customerList.some(item => {

                if (item.treedataid === this.editSelectId) {

                  o.push(item)

                  return true

                }

              })) {                

                  this.stashList = this._.unionBy(o, this.stashList, 'treedataid')

              }

            }

    }
  }
}

 

 进阶：在方法二的基础上实现拼音搜索

首先安装PinyinMatch, 执行 npm install pinyin-match --save

const PinyinMatch = require('pinyin-match')  //拼音搜索插件
export default {
  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 = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (condition) binding.value()
        })
      }
    }
  },
  data() {
    return {
      rangeNum: 20,
      searchText: '',
      stashList: [],
      editSelectId: 0
    }
  },
    computed: {
      ...mapGetters([
        'customerList'
      ])
    },
    mounted() {
      this.$store.dispatch('common/getCustomerList').then(() => {
        this.stashList = this.customerList
      })
    },
  methods: {
    loadMore(n) {
      // eslint-disable-next-line
        return () => this.rangeNum += 5
    },
    searchTextFunc(newVal) {
      if (newVal) {
          //拼音搜索方法
          this.stashList = this.customerList.filter((item) => {
          return PinyinMatch.match(item.treedatacodeandname, newVal)
        })
      } else {
        this.stashList = this.customerList
      }
    },
    showOptions(v) {
      if (v) {
        this.stashList = this.customerList
        this.searchText = ''
      }
    }，
    //查看的时候处理数据：循环比较将已经选择的数据插到stashlist中
    examine(){
          if (this.editSelectId) {
              var o = []
              if (this.customerList.some(item => {
                if (item.treedataid === this.editSelectId) {
                  o.push(item)
                  return true
                }
              })) {                
                  this.stashList = this._.unionBy(o, this.stashList, 'treedataid')
              }
            }
    }
  }
}

 

参考：https://blog.csdn.net/sunnyboysix/article/details/106792693　

pinyinMatch使用参考：https://www.npmjs.com/package/pinyin-match、https://www.cnblogs.com/hellofangfang/p/10906986.html