首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue el-select 触底分页+远程搜索

vue实现el-select 触底分页+远程搜索的示例

2023-12-19 11:10:34 作者：前端初见

有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,本文主要介绍了vue实现el-select 触底分页+远程搜索的示例,具有一定的参考价值,感兴趣的可以了解一下

前言

大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。
解决方案:

后端将接口改为分页的、前端将el-select下拉框中的数据改为滚动加载
后端将接口改为模糊搜索的形式，通过选择器中输入的内容去搜索模糊匹配的数据然后返回；前端使用 elementUI 中el-select的远程搜索
我们可以实现一个Vue的自定义指令，每当使用el-select滚动到列表底部的时候就请求下一页数据，来达到下拉滚动加载更多的目的。

一、el-select 触底分页+远程搜索

触底分页

在这里插入图片描述

远程搜索

在这里插入图片描述

1.封装触底自定义指令

src目录下创建 select.js，并在main.js中全局引入
代码主要是实现一个el-select下拉加载的自定义指令v-loadmore：

import Vue from 'vue'
export default {}.install = (Vue, options = {}) => {
  Vue.directive('loadmore', {
    inserted(el, binding) {
      // 获取element-ui定义好的scroll盒子
      const SELECTDOWN_DOM = el.querySelector(
        '.el-select-dropdown .el-select-dropdown__wrap'
      )
      SELECTDOWN_DOM.addEventListener('scroll', function () {
        const CONDITION =
          this.scrollHeight - this.scrollTop <= this.clientHeight
        if (CONDITION) {
          binding.value()
        }
      })
    },
  })
}

代码说明：

document.querySelector：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
Element.scrollHeight：在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度（只读）
Element.scrollTop：获取或设置一个元素的内容垂直滚动的像素数。
Element.clientHeight：读取元素的可见高度（只读）。
元素滚动到底，下面等式返回true，没有则返回false。
警告：在使用显示比例缩放的系统上，scrollTop可能会提供一个小数。

2.在 mian.js 引入封装好的自定义指令

在项目中全局注册v-loadmore指令

import loadMore from './plugins/select'
Vue.use(loadMore)

3.在组件中进行使用

最后在组件el-select中使用该指令

html部分

<el-form-item label="关联案件:">
  <el-select
    v-model="searchParams.caseCode"
    v-loadmore="handleScroll"
    filterable
    remote
    :remote-method="remoteMethod"
  >
    <el-option
      v-for="item in ajList"
      :key="item.caseCode"
      :label="item.caseName"
      :value="item.caseCode"
    >
    </el-option>
  </el-select>
</el-form-item>

js部分

export default {
  data() {
    return {
      slectloading: false, //搜索下拉菜单
      ajList: [], //案件数据
      total: 0, //案件所有总数(接口返回)
      dqajtotal: 0, //当前案件总数(每次存储的长度)
    }
  },
  created() {
    this.getajnewlist() //获取案件
  },
  methods: {
    handleScroll() {
      console.log('触底了')
      console.log(this.dqajtotal, this.ajtotal)
      if (this.ajList.length < this.ajtotal) {
        this.slectloading = true
        this.getajnewlist() //获取案件方法
        this.slectloading = false
      }
    },
    // 获取案件
    getajnewlist() {
      this.selectfy.page = this.selectfy.page + 1
      console.log('页码', this.selectfy.page)
      this.$axios({
        url: 'case/list',
        method: 'GET',
        params: this.selectfy,
      }).then((res) => {
        if (res.code === 2000 && res.data) {
          console.log('获取成功')
          this.ajtotal = res.data.total
          if (res.data.records && res.data.records.length > 0) {
            res.data.records.forEach((ele) => {
              var idx = this.ajList.findIndex((item) => {
                return item.caseId == ele.caseId
              })
              if (idx == -1) {
                this.ajList.push(ele)
              }
            })
          }
        } else {
          console.log(res.resultStr)
        }
        console.log(res)
      })
    },
    // 关联案件下拉菜单远程搜索
    remoteMethod(val) {
      console.log('远程搜索', val)
      if (val && val.length > 0) {
        // 有内容
        this.slectloading = true
        this.$axios({
          url: 'case/list',
          method: 'GET',
          params: {
            size: 10,
            caseName: val,
          },
        }).then((res) => {
          console.log('远程搜索', res)
          this.ajList = res.data.records //案件信息
          this.slectloading = false
        })
      } else {
        this.slectloading = true
        this.$axios({
          url: 'case/list',
          method: 'GET',
          params: {
            size: 10,
          },
        }).then((res) => {
          console.log(res)
          console.log('远程搜索', res)
          this.ajList = res.data.records //案件信息
          this.slectloading = false
        })
      }
    },
  },
}

4.注意

传入的数组个数必须大于或者等于8个选项时才能让el-select组件出现下拉滚动。
列表里不存在滚动时，无法触发传入指令的函数。
未对 el-select 的其他参数做过多支持，如需支持，在不影响已有实例的使用的情况下，请直接修改组件源码增加可选的 prop 参数即可
当然，在项目中遇到某些固定的加载请求时，我们也可以对该组件进行再次封装，具体可以根据自身的业务需求进行修改。

总结

到此这篇关于vue实现el-select 触底分页+远程搜索的示例的文章就介绍到这了,更多相关vue el-select 触底分页+远程搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！