iview中如何解决下拉框数据太多，导致的页面卡，慢情况（1）

最新推荐文章于 2024-07-22 14:10:26 发布

钟文丶

最新推荐文章于 2024-07-22 14:10:26 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_41572552/article/details/115404722

版权

前端专栏收录该内容

6 篇文章 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 < 1000) {
          this.userList = this.userListCache
        } else {
          this.userList = this.userListCache.slice(0, 1000)
        }
      }
    },

2、select 的下拉框添加 filterable 属性和 @on-query-change="filterUserList“ @on-change=“addUser” 方法

					<Select
                      v-model="formData.dispatchUser"
                      filterable
                      clearable
                      @on-query-change="filterUserList"
                      @on-change="addUser"
                      placeholder="请选择分派人"
                    >
                      <Option
                        v-for="item in userList"
                        :value="item.value.toString()"
                        :key="item.value.toString()">
                        {{ item.label }}</Option >
                    </Select>

// 新增联系人

 addUser(data) {
    // 根据用户id过滤掉已添加的用户
      if (data && data !== '') {
        var temp = this.formData.userList.filter(item => {
          if (data == item.staff_id) {
            return item
          }
        })
        if (temp.length < 1) {
          const user = {
            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 < array.length; index++) {
          const element = array[index]
          if (element.label.match(reg)) {
            arr.push(element)
          }
        }
        this.userList = arr
      } else {
        if (this.userListCache.length < 1000) {
          this.userList = this.userListCache
        } else {
          this.userList = this.userListCache.slice(0, 1000)
        }
      }
    },