使用el-select封装支持搜索、多选、滚动分页的下拉框组件

最新推荐文章于 2024-07-24 14:36:39 发布

置顶 swagLi

最新推荐文章于 2024-07-24 14:36:39 发布

阅读量2.6k

点赞数

分类专栏： vue、elementUI、音视频通信、echarts实战文章标签： vue

本文链接：https://blog.csdn.net/qq_41149508/article/details/119356010

版权

vue、elementUI、音视频通信、echarts实战专栏收录该内容

25 篇文章 43 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中，针对数据量大的场景，如何封装一个el-select组件，实现下拉框的滚动分页、远程搜索以及多选功能。在用户选择不同页码数据时，通过将已选中的项插入数据前列并隐藏来解决重复显示的问题。

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

一、相信做过管理后台的都会遇到这样的需求，因为数据量太大下拉框数据采用滚动分页的方式同时支持远程搜索、多选/单选。

`1、封装组件、目录放在components/commom-scroll/index`

<template>
  <el-select
    v-model="chooseValue"
    v-loadmore="loadMore"
    remote
    filterable
    :remote-method="remoteMethod"
    class="scroll-select"
    :popper-class="`scroll-select-popper ${loading && 'loading'}`"
    :placeholder="defaultValue || '请选择'"
    :multiple="multiple"
    @change="handleChange"
  >
    <!-- 只有isShow定义了false，才进行隐藏，否则正常显示 -->
    <el-option
      v-for="(i

了解本专栏