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

最新推荐文章于 2024-07-22 09:40:43 发布

weixin_33696106

最新推荐文章于 2024-07-22 09:40:43 发布

阅读量7.4k

点赞数 2

文章标签： javascript 大数据 ViewUI

原文链接：https://segmentfault.com/a/1190000017812498

版权

本文探讨了在el-select组件中处理大量数据的方法，包括采用远程搜索以减少初始渲染时间，以及实施下拉懒加载loadMore功能，当滚动到底部时动态加载更多选项。在实现懒加载后，文章提出了一种解决选中数据在分页切换后丢失的问题，即保存选中ID并在下次加载时手动设置。

摘要由CSDN通过智能技术生成

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