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 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
解决vue scoped html样式无效的问题
Oct 24 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 解决session死锁的方法
2013/06/20 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
JS日历 推荐
2006/12/03 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python实现RSA加密(解密)算法
2016/02/17 Python
python简易远程控制单线程版
2018/06/20 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
详解python中各种文件打开模式
2020/01/19 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
python基于opencv实现人脸识别
2021/01/04 Python
海量信息软件测试笔试题
2015/08/08 面试题
会计电算化学生个人的自我评价
2014/02/08 职场文书
公司拓展活动方案
2014/02/13 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
2015年暑假生活总结
2015/07/13 职场文书
python playwright之元素定位示例详解
2022/07/23 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS