华为云社区《解决el-select数据量过大的卡顿的两种思路与一种实施方案》

本文分享自华为云社区《解决el-select数据卡顿的两个思路和一个实施方案》,作者:KevinQ。

经典问题:如果在测试环境下可以正常工作,为什么在官方环境下就不行?

——这篇文章:数据量变了。

问题的根源

最近,我正在开发公司的后台管理系统。这是一个非常简单的部分。设置部门领导。前端使用 Element-UI 的 el-select 组件。后端返回当前操作员有权控制的可选人员列表。大家。

在测试环境下可以正常使用,为什么在官方环境下就不行了?

问题分析

有问题的原始代码很简单:

<el-select
v-model="orgForm.leader"
placeholder="请选择部门领导"
style="width: 15vw"
clearable
  multiple
  filterable
>
  <el-option
v-for="(l, index) in leaderOptions"
:key="index"
:label="l.realname"
:value="l.id"
/>
</el-select>

问题是在测试环境中,el-select的可选数据的leaderOptions最多在100多个量级,但是在正式生产环境中,leaderOptions达到近20000个,导致组件卡死。

所以解决问题的方法是如何减少el-select中可选leaderOptions的数量。

两种解决方案

我们认为有两种解决方案:

前后端协调

这种方式的好处是思路清晰简单,修改了后台接口返回的数据量。每个查询只返回 100 条数据。毕竟在使用方面,没有人会真正下拉选择。

这种方法的缺点是前端是问题,但需要后端解决,增加了后端的工作量。团队沟通成本。

因此,我们放弃了这种方法。 (其实我也懒得交流,只想自己解决问题,不打扰别人!)

纯前端解决方案

为了减少el-select中的options个数,我们构造了数据:leaderOptionsTop30,每次只返回(大约)30条所有options的数据,那么这大约30条数据是根据什么过滤的去?

我们设置了el-select的filter-method:

<el-select
              v-model="orgForm.leader"
              placeholder="请选择部门领导"
              style="width: 15vw"
              clearable
              multiple
              filterable
              :filter-method="filterCheckPerOptions"
            >
              <el-option
                v-for="(l, index) in leaderOptionsTop30"
                :key="index"
                :label="l.realname"
                :value="l.id"
              />
            </el-select>

方法体:

filterCheckPerOptions(query = '') {
    // query是输入框中的检索条件
  var arr = this.leaderOptions.filter(item => {
    return !this.$method.isEmpty(item.realname) && item.realname.includes(query)
  })
  // 根据检索条件筛选出来的选项,只取前30条
  if (arr.length > 30) {
    arr = arr.slice(0, 30)
  }
  // 清空之前的选项
  this.leaderOptionsTop30.splice(0, this.leaderOptionsTop30.length)
  // chosen表示已被选择的选项,添加这一部分主要是为了回显,避免选择框中直接出现用户id
  const chosen = this.getChosenItemsArr()
  // 检索项 + 已选项的并集
  const result = [...arr, ...chosen.filter(item => !arr.includes(item))]
  if (arr.length > 30) {
    this.leaderOptionsTop30.push(...result)
  } else {
    this.leaderOptionsTop30.push(...result)
  }
},
getChosenItemsArr() {
      // 获取已被选中的人员
      const items = []
      for (let i = 0; i < this.leaderOptions.length; i++) {
        if (this.orgForm.leader.indexOf(this.leaderOptions[i].id) >= 0 &&
        items.indexOf(this.leaderOptions[i]) < 0) {
          items.push(this.leaderOptions[i])
        }
      }
      return items
    },

完成,收工!

离题

生产环境运行结果与测试环境不同。通常有很多原因,例如:

服务器:例如服务器的时区、语言等配置不同,可能会导致一些没有指定特定语言或时区的代码执行不一致。数据配置:大部分功能上线后,都需要在后台进行数据配置,相信不用多说。数据量:

数据量会影响界面的响应性、页面组件的响应性等。比如一个操作需要等待后台界面,如果后台界面超过一定的时间,前端用户会明显感觉到操作卡顿,没有响应。

点击关注,第一时间了解华为云新技术~

© 版权声明
THE END
喜欢就支持一下吧
点赞97 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片