下拉数据过多，超过3000条浏览器卡顿

浏览器是单线程，浏览器的处理和渲染能力都很差，碰到下拉框数据超过3000条就会有卡顿，基于element-UI的select我做了一个下拉框筛选的封装，可以控制前台显示下拉框中数据的数量

父组件使用案例：

formAttr 相当于v-model
options 下拉数据
max 下拉框展示的条数
当下拉数据中属性不是value和label时，传一个myOptions，例：{value:'id',label:'text'}

<filter-select:formAttr.sync="form.name":options="nameList":max="10":myOption="myOption"
>
</filter-select><script>
import filterSelect from '../modules/filterSelect.vue';
export defaule {components: { filterSelect },data() {return {form: {name: '',},nameList: [{ id: 1, text: 'hello1' },{ id: 2, text: 'hello2' },{ id: 3, text: 'hello3' },],myOption: { value: 'id', label: 'text' },},}
}
</script>

子组件HTML部分：

<template><!-- 基于el-select对后台返回超大下拉数据处理 --><el-selectv-model="attr"filterable:clearable="clearable":filter-method="selectFilter":allow-create="allowCreate":myOption="myOption"@change="change"@visible-change="visibleChange"@clear="clear"@blur="blur"><el-optionv-for="item in selectList":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template>

JS部分

export default {/*** 使用案例：*  <filter-select:formAttr='form.name':options='nameList':max='100':myOption='myOption'></filter-select>父组件中data定义myOption，如果后台返回的下拉数据不是[{value:'hb',label:'河北'},{value:'bj',label:'北京'}]而是[{proID:'hb',province:'河北'},{proID:'bj',province:'北京'}]此时就可以通过 myOption:{value:'province' , label:'proID'}*/name: 'filterSelect',props: {// form表单的绑定值，比如 form.numformAttr: {required: true,type: [String, Number],default: '',},// 下拉数据的属性，一般为value和label，但也有不是的情况，比如返回的是id 和 textmyOption: {type: Object,default: () => {return {value: 'value',label: 'label',};},},// 父组件传过来的下拉数据options: {required: true,default: () => [],},// 最多展示的条数max: {type: [Number, String],default: () => 50,},// 是否禁用disabled: {type: Boolean,default: () => false,},// 是否可以清空clearable: {type: Boolean,default: () => false,},// 是否支持创建条目allowCreate: {type: Boolean,default: () => false,},},computed: {},watch: {// 监听下拉框数据，发生变化执行下拉数据过滤截取options: {handler() {this.selectFilter();},deep: true,},formAttr:{handle(n){this.attr = n},immediate:true}},data() {return {attr: this.formAttr,selectList: [],};},methods: {// query是输入的值selectFilter(query = '') {let arr = this.options.map(obj => {return { value: obj[this.myOption.value], label: obj[this.myOption.label] };});console.log(arr);arr = arr.filter(item => {return (item.value.toString().toLowerCase().includes(query) ||item.label.toString().toLowerCase().includes(query));});if (arr.length > this.max) {this.selectList = arr.splice(0, this.max);} else {this.selectList = arr;}},// 父组件事件可以直接参照 element-UI 的方法执行change(val) {this.$emit('update:formAttr',val)this.$emit('change', val);},// 下拉框出现/隐藏时触发visibleChange(val) {this.$emit('visibleChange', val);},// 可清空的单选模式下用户点击清空按钮时触发clear() {this.$emit('clear');},// 当 input 失去焦点时触发blur(e) {this.$emit('blur', e);},// 当 input 获得焦点时触发focus(e) {this.$emit('focus', e);},},mounted() {// this.selectList = this.options.map(item => {//   return { value: item[this.myOption.value], label: item[this.myOption.label] };// });},
};

it's over.

有哪里不理解的可以留言或者联系我，这个也可以改成输入内容向后端请求

下拉数据过多，超过3000条浏览器卡顿相关推荐

vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
vue + Echarts 填坑记（Echarts数据量大，导致浏览器卡顿）
最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...
better-scroll 上拉加载，下拉刷新(解决移动端长页面卡顿)
一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...
微信小程序禁用页面下拉，且局部上下滚动不卡顿
众所周知,微信小程序页面在下拉后,顶部会出现留白的不友好用户体验(当然,需要启用页面下拉刷新的另说).官网有禁用下拉的配置,但使用后,如果页面中局部区域需要滚动显示更多内容时,则会出现滚动不顺畅的情况 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
如题博主在开发过程中遇到了问题就是当数据量过大时浏览器特别卡情景: 每秒实时渲染数据效果:当前数据没有渲染完就开始渲染下一秒的数据了如何将巨大的数据在一秒内快速渲染到页面上呢? 解决方案 ...
Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果
目录 1.图表数据过多导致浏览器卡顿 2.Y轴数据添加单位 3.带圆角及柱状背景的柱状图 4.legned 图例超出部分显示省略号 5.柱状图 / 拓扑图(气泡图)渐变色效果 1.图表数据过多导致浏览 ...
PB9.0实现下拉数据列表的实现
首先说明下,我用的开发环境是PB9.0,oracle10G 数据库. 在平常的开发中,经常用到下拉选择框的录入形式,这样录入即简便快捷,保证不出错,而且可以将复杂的输入内容用较直观的方式代替,比如要输 ...
easyExcel导出数据并设置单元格下拉数据
easyExcel由于导出和导入的注解差异,所以实现不了标题功能此处不在介绍导出导出的注解 entity: @DropDownSetField自行封装注解:稍后解释 public class Sal ...
mysql表数据量超过百万条了，count很慢。。
mysql表数据量超过百万条了,count很慢.. (15) mysql表数据量超过百万条了,count很慢.. - MySQL - 乐维UP mysql表数据量超过百万条了,count很慢.. ...

下拉数据过多，超过3000条浏览器卡顿

父组件使用案例：

子组件HTML部分：

下拉数据过多，超过3000条浏览器卡顿相关推荐

最新文章

热门文章