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

leoperfect 发布于2019-08-23 14:35 / 1344人阅读

摘要：数据过多处理方式在日常项目中组件的使用频率是非常之高的当数据过多时渲染时间非常长这里提供几个处理方式远程搜索组件提供了远程搜索方式也就是按照你输入的结果匹配选项官网提供了参考示例这里不加赘述下拉懒加载下拉懒加载当滚动到底部时你再去请求一

el-select数据过多处理方式

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

远程搜索

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

官网提供了参考示例; 这里不加赘述.

下拉懒加载loadMore

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

某组件中:



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中,
这样就解决了这个问题.

云服务器私有云 fragment懒加载数据 php懒加载数据框架 ionic js懒加载数据 js实现数据的懒加载图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100837.html

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

摘要：数据过多处理方式在日常项目中组件的使用频率是非常之高的当数据过多时渲染时间非常长这里提供几个处理方式远程搜索组件提供了远程搜索方式也就是按照你输入的结果匹配选项官网提供了参考示例这里不加赘述下拉懒加载下拉懒加载当滚动到底部时你再去请求一 el-select数据过多处理方式在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. ...

elliott_hu 2019-08-02 14:04 评论0 收藏0
【简单好用，支持懒加载】 vue-waterfall2 基于Vue.js 瀑布流组件

摘要：不需知道元素宽高，可宽高自适应自定义程度高支持懒加载提供端滑动到底部触发，端需要上拉触发使用极为简便适用于有问题欢迎提前端工程化算法注意需要与一起使用才会生效，否则会进行自适应宽度使用布局时，需先计算出自适应后的宽度再传值使用了的 vue-waterfall2 1.不需知道元素宽高，可宽高自适应 2.自定义程度高 3.支持懒加载(lazy-src) 4.提供Event:loadmor...

james 2019-08-26 12:24 评论0 收藏0
vue 在移动端体验上的优化解决方案

摘要：去年年底自己搭了一个在移动端的开发框架，感觉体验不是很好。路由懒加载首页终于写完了，以上这些就是我在移动端体验优化的实战。去年年底自己搭了一个vue在移动端的开发框架，感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化自定义vuex-plugins-loading 路由切换动画 + keep alive 动态管理缓存组件 better-sc...

godlong_X 2019-05-22 11:25 评论0 收藏0
Javascript零碎之IntersectionObserver

摘要：主要用于元素可见性的监听，比传统通过全局监听事件去判断可见性无论是性能还是便利性都要好得多。问题是这种通过监听的方式很容易导致性能问题，或者多多少少会有些性能损失。 IntersectionObserver主要用于元素可见性的监听，比传统通过全局监听scroll事件去判断可见性无论是性能还是便利性都要好得多。因为api比较新，存在兼容性问题，好在已经有了兼容的polyfill.其基本介...

张迁 2019-08-23 18:24 评论0 收藏0
数据驱动，快速开发组件（ElementUI篇）

摘要：基于这种思路，那留给我们的只有两步，组件设计和数据设计。关于组件的相关逻辑，可能要在文章里面一次性说清楚，还是需要费很大的精力，不过希望数据驱动的思想能够让之前没有体会到这种开发乐趣的小伙伴们有到新的想法。在日常开发中，我们肯定不止一次碰到重复的业务代码，明明功能相似，但总没思路去把它封装成组件。关于封装组件，希望这篇文章能带给大家新的思路，去更高效的完成日常开发。（注：例子都是基于...

enrecul101 2019-08-26 13:39 评论0 收藏0