el-select数据过多懒加载的解决(loadmore)


Posted in Javascript onMay 29, 2019

el-select数据过多处理方式

在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式.

远程搜索

组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项.

下拉懒加载loadMore

下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中.

某组件中:

<template>
  <el-select
    v-model="value"
    placeholder="请选择"
    filterable
    multiple
    v-el-select-loadmore="loadmore"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.id">
    </el-option>
  </el-select>
</template>
 
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 {
      value: '',
      options: [],
      formData: {
        pageIndex: 1,
        pageSize: 20,
      }
    };
  },
  mounted() {
    this.getList(this.formData);
  },
  methods: {
    loadmore() {
      this.formData.pageIndex++;
      this.getList(this.formData);
    },
    getList(formData) {
      // 这里是接口请求数据, 带分页条件
      const _res = [1, 2, 3]; // 请求得到的数据
      this.options = [...this.options, ..._res];
    }
  }
};

这样就做到了滚动懒加载, 具体细节在应用时修改.

问题

这样渲染问题解决了, 随之会出现一个问题, 就是当你的value为选中的数据后, 分页数大的数据.

当页数小时, options数据中没有当前value的那一个, value就会显示为得到的id.

当你选中后你要保存下来当前的id以及lable, 下次过来时, 带入当前组件, 手动放在options中,这样就解决了这个问题.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js注意img图片的onerror事件的分析
Jan 01 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
几种tab切换详解
Feb 03 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
javaScript封装的各种写法
Aug 14 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 #Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 #Javascript
vue-cli3中vue.config.js配置教程详解
May 29 #Javascript
详解vue-cli3开发Chrome插件实践
May 29 #Javascript
vue里的data要用return返回的原因浅析
May 28 #Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 #Javascript
Javascript三种字符串连接方式及性能比较
May 28 #Javascript
You might like
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP基础知识回顾
2012/08/16 PHP
PHP经典面试题集锦
2015/03/19 PHP
php统计数组元素个数的方法
2015/07/02 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
基于python实现文件加密功能
2020/01/06 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python如何实现远程方法调用
2020/08/07 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
医学生实习自荐信
2013/10/01 职场文书
民族学专业求职信
2014/07/28 职场文书
英文商务邀请函范文
2015/01/31 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang