高仿el-select单选搜索+前端大数据下拉滚动分页

最新推荐文章于 2024-07-29 13:04:31 发布

啥咕啦呛

最新推荐文章于 2024-07-29 13:04:31 发布

阅读量2.1k

点赞数

分类专栏： # vue 技术栈前端综合文章标签：前端 big data 大数据

本文链接：https://blog.csdn.net/happy921212/article/details/119277962

版权

针对el-select在大数据量下渲染慢的问题，本文介绍了如何改造element-ui，实现下拉搜索分页滚动加载。新建了一个名为selectSearch.vue的子组件，实现了在保持搜索功能的同时，优化了页面性能，解决了大数据量导致的卡顿问题。

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

最近在用element-ui遇到一些bug,在使用el-select时，数据量大了就页面渲染缓慢从而卡顿严重，为了解决这个问题，对element-ui进行了改造，el-select改为分页滚动加载：

如上图所示的效果，大数据时下拉可以分页滚动加载，而且可以支持原来的搜索。

1.新建一个selectSearch.vue页面子组件，页面内容如下：

<template>
    <div>

        <div class="selectBox" v-clickoutside="handleClose">
            <i class="icon el-icon-arrow-down " :class="showdrop?'arrowtop':''"></i>
            <input type="text" :placeholder="$t('pageinfo.searchstore')"
                   ref="searchInput"
                   v-model="selectData.storeName"
                   @focus="showdropbox"
                   @blur="closedropbox"
                   @input="selectInput"
                    />
            <transition name="el-zoom-in-top">
                <div class="dropdown" v-if="showdrop" v-el-select-loadmore="load">
                    <div class="arrow"></div>
                    <div class="contentMore" v-show="loadTextBox" :style="storeidlist.length>7?'height:250px;':(storeidlist.length===0?'height:46px':'height:'+(storeidlist.length*34+12)+'px;')">
                        <el-scrollbar  style="height: 100%;max-height:250px;" ref="myscroll" class="myscroll" >
                            <ul  >
                                <li v-for="store in storeidlist" :class="store.storeId === SelectValue.storeId ?'selected ':''"
                                    @click="selectOne(store)">{
  {store.storeName}}</li>

                                <li v-if="storeidlist.length==0" style="display: inline-block;">{
  {$t('pageinfo.nosearchdata')}}</li>
                            </ul>
                        </el-scrollbar>
                    </div>

                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import Clickoutside from './../../utils/clickoutside';