vue对el-autocomplete二次封装增加下拉分页

 更新时间:2022年03月08日 11:11:32   作者:rambler_wang  
项目中的联想输入框现在都是采用的el-autocomplete实现的,但是数据增多就会需要做分页处理,本文主要介绍了vue对el-autocomplete二次封装增加下拉分页,感兴趣的可以了解一下

项目中的联想输入框现在都是采用的el-autocomplete实现的,但是随着数据量越来越多,产品要求一次不要返回所有的联想数据,要做分页处理,所以需要添加一个分页的功能。

注:看懂下面的代码需要先对vue和element有一定的学习。

废话不多数,先上完整代码

<template>
  <el-autocomplete
    ref="autocomplete"
    value-key="value"
    v-scrollLoad="selectLoadMore"
    v-loading="loading"
    v-model="state"
    :fetch-suggestions="querySearch"
    :placeholder="placeholder"
    :trigger-on-focus="false"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  name: 'InputLoadMore',
  props: {
    // 封装的查数据方法
    getOptionFn: {
      require: true
    },
    // 后端定义的联想的key
    searchKey: {
      type: String,
      require: true
    },
    // v-model的绑定值
    value: {
      type: String,
      require: true
    },
    // placehoder
    placeholder: {
      type: String,
      default: '请输入'
    }
  },
  data() {
    return {
      state: '',
      loading: false,
      page: 1,
      pageTotal: 0
    }
  },
  watch: {
    state(val) {
      this.$emit('input', val)
    },
    value(val) {
      this.state = val
    }
  },
  directives: {
    // 自定义指令,监听下拉框的滚动,滚动到底部就加载下一页
    scrollLoad: {
      bind(el, binding, vnode) {
        let wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
        let listDom = el.querySelector('.el-autocomplete-suggestion__wrap  .el-autocomplete-suggestion__list')
        wrapDom.addEventListener(
          'scroll',
          e => {
            // 注意load的使用,节流
            let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 10 - listDom.offsetHeight
            if (condition > 0 && !vnode.context.loading) {
              //滚动到底部则执行滚动方法load,binding.value就是v-scrollLoad绑定的值,加()表示执行绑定的方法
              binding.value()
            }
          },
          false
        )
      }
    }
  },
  methods: {
    async querySearch(queryString, cb) {
      this.page = 1
      this.loading = true
      try {
        let { result } = await this.getOptionFn({
          page: 1,
          pageSize: 50,
          [this.searchKey]: queryString
        })
        // 根据实际情况修改下面的代码,展示数据
        if (result.rows) {
          let arr = []
          result.rows.forEach(item => {
            arr.push({ value: item })
          })
          cb(arr)
        } else {
          cb([])
        }
        this.pageTotal = result.total || 0
      } catch(e) {
        // console.log(e)
      } finally {
        this.loading = false
      }
    },
    handleSelect(item) {},
    // 加载更多
    async selectLoadMore() {
      if(Number(this.pageTotal) <= this.$refs['autocomplete'].$data.suggestions.length) {
        return
      }
      this.page = this.page + 1
      this.loading = true
      try {
        let { result } = await this.getOptionFn({
          page: this.page,
          pageSize: 50,
          [this.searchKey]: this.state
        })
        // 根据实际情况修改下面的代码,展示数据
        if (result.rows) {
          const arr = result.rows.map(item => {
            return { value: item }
          })
          // 将数据添加到下拉列表
          this.$refs['autocomplete'].$data.suggestions = this.$refs['autocomplete'].$data.suggestions.concat(arr)
        }
        this.pageTotal = result.total || 0
      } catch(e) {
        // console.log(e)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
</script>

下面对主要的地方进行讲解。

1.自定义指令实现下拉加载更多。

主要代码

// 自定义指令,监听下拉框的滚动,滚动到底部就加载下一页
    scrollLoad: {
      bind(el, binding, vnode) {
        let wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
        let listDom = el.querySelector('.el-autocomplete-suggestion__wrap  .el-autocomplete-suggestion__list')
        wrapDom.addEventListener(
          'scroll',
          e => {
            // 注意load的使用,节流
            let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 10 - listDom.offsetHeight
            if (condition > 0 && !vnode.context.loading) {
              //滚动到底部则执行滚动方法load,binding.value就是v-scrollLoad绑定的值,加()表示执行绑定的方法
              binding.value()
            }
          },
          false
        )
      }

上面主要是运用了vue的自定义指令的bind钩子。不太了解的可以先看这个https://cn.vuejs.org/v2/guide/custom-directive.html 。bind有四个参数(el、binding、vnode、oldVnode)这里用前三个,el代表绑定的元素,用来操作dom,这里用来添加scroll事件,以及计算下拉框是否滑动到底部(注意计算中的+10高度);binding是一个对象,包含旧值、新值、指令名等,这里主要用绑定值value,用来执行加载更多的方法;Vnode指的是虚拟节点,这里取他的context即为this控制loading来节流。

2.增加props(getOptionFn、searchKey、value、placeholder)抽离业务。成为公共组件

  • getOptionFn为接口封装的方法。fetch-suggestions和加载更多里面都要用到
  • searchKey表示接口需要传的参数的key,不同的接口的key可能不一致。
  • value是外面v-modle的绑定值,注意在watch里面设置值,不知道的可以看看v-model的实现原理。
  • placeholder不解释

3.可能需要解释的

  • 在加载到更多数据后怎么把输入加到下拉里面?
this.$refs['autocomplete'].$data.suggestions // 下拉的列表
  • 怎么避免加载完了还加载更多。

这里是用的数量比较,也可以加一个标识符,加载完了设置为true,变化条件后设为false。

if(Number(this.pageTotal) <= this.$refs['autocomplete'].$data.suggestions.length) {
    return
  }

到此这篇关于vue对el-autocomplete二次封装增加下拉分页的文章就介绍到这了,更多相关vue el-autocomplete下拉分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用Vue中 v-for循环列表控制按钮隐藏显示功能

    使用Vue中 v-for循环列表控制按钮隐藏显示功能

    这篇文章主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下
    2019-04-04
  • 使用vue-cli(vue脚手架)快速搭建项目的方法

    使用vue-cli(vue脚手架)快速搭建项目的方法

    本篇文章主要介绍了使用vue-cli(vue脚手架)快速搭建项目的方法,vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • vue项目中的遇错:Invalid Host header问题

    vue项目中的遇错:Invalid Host header问题

    这篇文章主要介绍了vue项目中的遇错:Invalid Host header问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 用Axios Element实现全局的请求loading的方法

    用Axios Element实现全局的请求loading的方法

    本篇文章主要介绍了用Axios Element实现全局的请求loading的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue项目如何设置全局字体样式font-family

    vue项目如何设置全局字体样式font-family

    这篇文章主要介绍了vue项目如何设置全局字体样式font-family问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 浅谈Vue的加载顺序探讨

    浅谈Vue的加载顺序探讨

    本篇文章主要介绍了Vue的加载顺序探讨,详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Vue使用v-viewer实现图片预览

    Vue使用v-viewer实现图片预览

    这篇文章主要为大家详细介绍了Vue使用v-viewer实现图片预览,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue-admin-template配置快捷导航的代码(标签导航栏)

    vue-admin-template配置快捷导航的代码(标签导航栏)

    这篇文章主要介绍了vue-admin-template配置快捷导航的方法(标签导航栏),本文通过实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 详解Vue.js入门环境搭建

    详解Vue.js入门环境搭建

    这篇文章主要介绍了详解Vue.js入门环境搭建,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • vue+js实现视频淡入淡出效果

    vue+js实现视频淡入淡出效果

    这篇文章主要为大家详细介绍了vue+js实现视频的淡入淡出,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论