基于select下拉分页，查询，回显，默认值研究和以及实现

最新推荐文章于 2023-12-19 16:20:06 发布

置顶禅思院

最新推荐文章于 2023-12-19 16:20:06 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：禅あ思之vue生态圈文章标签： javascript element-ui vue

本文链接：https://blog.csdn.net/alnorthword/article/details/106770312

禅あ思之vue生态圈专栏收录该内容

25 篇文章 ¥89.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中，使用Element UI进行select组件的封装，解决因下拉数据过多导致的性能问题。通过封装带分页功能的select组件，实现了查询、回显及默认值设置，减少了接口调用次数，优化了浏览器性能。文章详细讨论了封装过程中遇到的问题，如避免多次接口调用和v-model绑定对象，以及利用el-popover、el-input和el-pagination等组件实现功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于select下拉分页，查询，回显，默认值研究和以及实现

前言

随着vue的技术越来越成熟，前端圈子里涌现出很多UI库，正整用到自己项目中和业务中的聊聊无几，我们公司用了element UI 框架，真心不想吐槽，用别人的ui框架，只能默默的忍受啊，哈哈！在项目中我经常用到select选择框，在下拉数据比较多的情况下很容易造成浏览器的吃力，特别在表格中，会生成很多如下dmo,造成大量的dom树,如下图
在这里插入图片描述

在一般情况下，表格中的列特别多，分页的话一般，也有20条吧，相当于20个dom,如果分页点击，生成的更多！你会发现点着点着，就会慢慢变卡，甚至崩溃！根据这样的情况，我重写一个select 组件，带有下拉分页的，支持回显。