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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
js实现省市级联效果分享
Aug 10 Javascript
在小程序开发中使用npm的方法
Oct 17 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
深入解析php中的foreach函数
2013/08/31 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python基础教程之Hello World!
2014/08/29 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python微信公众号开发简单流程实现
2020/03/09 Python
python和JavaScript哪个容易上手
2020/06/23 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
先进集体获奖感言
2014/02/13 职场文书
工程采购员岗位职责
2014/03/09 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
教师个人自我评价
2015/03/04 职场文书
入党积极分子考察意见
2015/06/02 职场文书
植物园观后感
2015/06/11 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
导游词之无锡梅园
2019/11/28 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server