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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
javascript 常用功能总结
Mar 18 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
详解JavaScript 高阶函数
Sep 14 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检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
php xhprof使用实例详解
2019/04/15 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python运算符重载详解及实例代码
2017/03/07 Python
详解python字节码
2018/02/07 Python
python的依赖管理的实现
2019/05/14 Python
python实现按行分割文件
2019/07/22 Python
python监控nginx端口和进程状态
2019/09/06 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
大学生期末自我鉴定
2014/02/01 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
作文评语大全
2014/04/23 职场文书
中学生励志演讲稿
2014/04/26 职场文书
小学生读书活动总结
2014/06/30 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
工作收入证明模板
2015/06/12 职场文书
告知书格式
2015/07/01 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server