当使用lect选择器时,如果下拉列表的数据量太多,会有一个明显的卡顿体验,例如:
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script></head><body> <div id="app"> <el-lect v-model="value" filterable placeholder="请选择"> <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label"> </el-option> </el-lect> &孤独的夜lt高分作文;/div> <script> let options = []; for(let i=1;i<5000;i++)options.push({label:'test'+i}); //模拟大数据下拉列表 new vue({ el:"#app", data:{ options:options, value:'' } }) </script></body></html>
writer by:大沙漠 qq:22969969
例子里我们用options模拟大量的下拉数据,渲染如下:
由于下拉列表有几千个,因此通过滚动条一个个的去找不是很现实的, 我们设置了filterable
属性,因此可以在下拉控件里进行搜索,如下:
体验的过程中还是会感觉明显的卡顿现象,问题和上面一样,还是因为下拉列表太多了,怎么办呢,我们可以通过lect控件的filter-method方法来自定义搜索方法,限制下拉数据只有有限制的条数,例如:
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script></head><body> <div id="app"> <el-lect v-model="value" filterable :filter-method="filtermethod" placeh有核older="请选择"> <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label"> </el-option> </el-lect> </div> <script> let options = []; for(let i=1;i<5000;i++)options.push({label:'test'+i}); //模拟大数据下拉列表 new vue({ el:"#app", data:{ options:options.slice(0,10), //默认为options的前10个 value:'' }, methods:{ filtermethod(query){ //query是输入的关键字 if(query == '') this.options = options.slice(0,10) el{ let result = [] //存储符合条件的下拉选项 options.foreach(val=>{ if(val.label.indexof(query)!=-1) result.push(val) }) this.options = result.slice(0,10) 成长中的 //只取前10个 } } } }) </script></body></html>
渲染如下:
易经学习这样就不会有卡顿问题了,我们限制了下拉选项的个数,因此通过滚动条可以很容易的选择到某个选项,对于大批量的下拉选项来说挺有用的。
本文发布于:2023-04-03 09:37:19,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/557729e122c62686c44a1723f7c0964b.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:Element.doc
本文 PDF 下载地址:Element.pdf
留言与评论(共有 0 条评论) |