vue select 下拉懒加载

vue select 下拉懒加载

使用第三方插件 github.com/Ray-56/vue-element-util...
使用 npm install vue-element-utils
在main.js 文件头部引入

import elementUtils from 'vue-element-utils'
Vue.use(elementUtils);

<template>
  <el-select
    clearable
    :loading="loading"
    multiple
    reserve-keyword
    collapse-tags
    v-model="value2"
    placeholder="请选择"
    filterable
    remote
    v-el-select-scroll="selectScroll"
    @change="selectOption"
    @click.native="getSelect"
    :remote-method="remoteMethod"
  >
    <el-option
      v-for="(item,index) in options"
      :key="index"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { getApiSelect } from '@/api/demo'  
export default {
  name: 'HelloWorld',
  data: function () {
    return {
        options: [],       // 下拉options的数据存储
        loading: false,    // 加载效果展示
        value2: '',        // 选中的数据存储
        datas: {
        cursor: 0,        //初始化的游标地址
        limit: 100,       // 查询数据条数
        cname: ''         // 查询名称
        },
        isStop: false    // 初始化是否滚动请求
    }
  },
  methods: {
    // 请求远程数据
    getSelect () {
      this.datas.cursor = 0
      this.datas.limit = 100
      this.datas.cname = ''
      this.loading = true
      this.options = []
      this.isStop = false
      getApiSelect(this.datas).then((data) => {
        this.options = data
        this.loading = false
        this.isReachBottom = true
      }).catch(err => {
        console.log('数据返回结果错误==》', err)
      })
    },
    selectScroll () {
      // Select 滚动到底部 执行该方法
      // 这里可以做一些懒加载之类的事情，eg：
      // 防止无效的请求
      if (this.isStop) {
        return
      }
      // 重新设置查询游标地址 后端的 limit this.datas.cursor，100
      this.datas.cursor = this.datas.cursor + this.datas.limit
      getApiSelect(this.datas).then(res => {
        // 得到的数据需要过滤一下 如果存在 options 中那么删除res的数组后在追加
        this.options.filter(function (item, index, arr) {
          for (var i = 0; i < res.length; i++) {
            if (res[i].value === item.value) {
              res.splice(i, 1)
            }
          }
        })
        // 当请求为回来的数据 为0的时候，下次将不在请求
        if (res.length === 0) {
          this.isStop = true
        }
        // 数组展开追加到options数组中
        this.options.push(...res)
      }).catch(err => {
        console.log(err)
      })
    },
    // 搜索远程数据
    remoteMethod (query) {
        this.loading = true        // 请求数据时显示的加载效果
          this.datas.limit = 100   // 初始化查询的数据条数
          this.datas.cursor = 0    // 初始化搜索时游标地址
          this.datas.cname = query // 监听到输入框的数据
          this.options = []   // 初始化数据为空
          this.isStop = false //初始化可以滚动时可以请求后端数据
          getApiSelect(this.datas).then(res => {
            this.options = res
            this.loading = false
          })
        }
      }
}
</script>

本作品采用《CC 协议》，转载必须注明作者和本文链接