原文:Element-ui 下拉列表 选项过多时通过自定义搜索来解决卡顿问题

当使用Select选择器时,如果下拉列表的数据量太多,会有一个明显的卡顿体验,例如: writer by:大沙漠 QQ: 例子里我们用options模拟大量的下拉数据,渲染如下: 由于下拉列表有几千个,因此通过滚动条一个个的去找不是很现实的, 我们设置了filterable属性,因此可以在下拉控件里进行搜索,如下: 体验的过程中还是会感觉明显的卡顿现象,问题和上面一样,还是因为下拉列表太多了,怎么 ...

2019-11-28 18:31 1 1016 推荐指数:

查看详情

Element-ui 下拉列表 选项过多时如何解决问题

当使用Select选择器时,如果下拉列表有几千个几万个,因此通过滚动条一个个的去找不是很现实, 这时可以对select设置filterable属性,可以在下拉控件里进行搜索。例如: 体验的过程中还是会感觉明显的现象,问题和上面一样,还是因为下拉列表太多了,这时我们可以通过Select控件 ...

Wed Mar 18 07:03:00 CST 2020 0 2552
解决element-ui下拉框数据过多,导致页面问题与本地分页功能实现

效果 前情提要: 最近使用element-ui开发的一个页面,在打开的时候占用cpu非常高,有时候都能达到90%↑。在调试时发现其中一个下拉框的接口返回2k↑的数据。本着有问题问百度的精神,看到主要的解决方案有如下两种: 监听下拉框滚动事件,去服务端请求数据 https ...

Tue Mar 30 18:28:00 CST 2021 0 512
巧妙解决element-ui下拉框选项过多问题

1. 场景描述 不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好 用人会说element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决 ...

Wed Jul 31 01:32:00 CST 2019 0 6359
巧妙解决element-ui下拉框选项过多问题

1. 场景描述 不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好 用人会说element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决 ...

Tue Jul 09 03:47:00 CST 2019 0 531
解决AutoComplete数据过多时问题

如下代码,data数据超过2千条时,每次输入字符过滤时非常 其原因: 每次输入变化,data就要从2000多条数据中过滤出目标元素,一过滤就导致AutoComplete下拉列表得变化,浏览器得重新绘制下拉列表的Dom,导致浏览器 解决办法一 采用防抖函数,在间隔时间内,连续 ...

Mon Apr 15 19:28:00 CST 2019 0 514
自定义UI下拉列表Select

上班第一时间就是上来发文章,哈哈~!今天分享一点干货——“自定义UI下拉列表Select”,是项目中用到的公用模块,主要是分享CSS方面及HTML结构方面的东西。JS写的很简单,目地是为了扩展性,方便攻城师们在此基础上做更多的扩展,应用到项目中去。你也可以直接前往DEMO页 CSS和HTML ...

Wed May 09 18:42:00 CST 2012 6 1571
Element-ui 下拉列表 全选 多选时 select全选 新增一个选择所有的选项

项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: 渲染如下: 此时可以多选,如果想要选择所有选项时,得一个个去点击,这样不是很方便,我们可以在下拉框里新增一个选择所有的选项,通过watch用几行代码就可以实现与其它选项的互斥来实现一键多选 ...

Tue Aug 06 15:33:00 CST 2019 7 8086
element-UI中el-select下拉框可搜索时候,filter-method自定义搜索方法

  使用element-UI框架的使用,我们经常使用el-select下拉框,很多时候还需要使用可搜索下拉框,然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法,但是却没有详细介绍怎么用,这里简单介绍一下用法,希望对大家有点帮助 ...

Wed Feb 20 01:02:00 CST 2019 6 26317
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM