| iview中如何解决下拉框数据太多，导致的页面卡，慢情况 （1） | 您所在的位置：网站首页 › vue渲染tree数据过多 › iview中如何解决下拉框数据太多，导致的页面卡，慢情况 （1） |
iview中如何解决下拉框数据太多，导致的页面卡，慢情况 （1）
|
项目背景: 发送告警信息需要配置通知人，但由于通知人分类，又划分用户、用户组、及钉钉微信等通知方式，而用户下面人数过多，全部渲染导致页面奇卡，用户体验很差,原来采用Cascader做选择配置，后面发现数据太多，且iview的Cascader没有监控搜索数据变化的方法，所以采用两个下拉框。 我在网上搜了，很少有这种搞法的，但是现在碰到了，顶着头皮也得上不是吗。 我想了一下解决方法 1、截取部分数据渲染dom，将全量数据在前台做缓存 2、支持用户搜索，获取用户在输入下拉框中输入的数据，在全量数据中搜索过滤，搜索之后进行还原 下面是具体的方案（忽略各种不规范的野鸡） 1、首先请求数据做缓存处理，减少后台请求次数，（） initUser() { var contact_info = JSON.parse( this.$libs.getSessionStorage('contact_info') ) if (contact_info && contact_info.length > 0) { var array = contact_info this.contactDataMap = this.$libs.arrayToMap(array, 'value', 'children') this.userListCache = this.contactDataMap['1'] this.userMap = this.$libs.arrayToMap( this.userListCache, 'value', 'label' ) // if (this.userListCache.length this.userList = this.userListCache.slice(0, 1000) } } },2、select 的下拉框添加 filterable 属性和 @on-query-change="filterUserList“ @on-change=“addUser” 方法 {{ item.label }}// 新增联系人 addUser(data) { // 根据用户id过滤掉已添加的用户 if (data && data !== '') { var temp = this.formData.userList.filter(item => { if (data == item.staff_id) { return item } }) if (temp.length staff_id: data, name: this.userMap[data] } this.formData.userList.push(user) } } }, // 在全量用户里搜索用户进行下拉框的渲染 filterUserList: function(name) { if (name !== null && name !== '') { this.userList = [] var arr = [] var reg = new RegExp(name) const array = this.userListCache for (let index = 0; index arr.push(element) } } this.userList = arr } else { if (this.userListCache.length this.userList = this.userListCache.slice(0, 1000) } } }, |
【本文地址】
公司简介
联系我们