现象:页面在跳转时,路由发生了改变,但是页面还停留在上一个路由的页面

原因:在路由跳转时,vue销毁页面数据用时过长,导致页面卡顿。经过排查发现页面中有一个select下拉选择框,数组有1w+,造成了页面卡死现象。

解决:

//在获取数据时进行处理,只展示10条
 async getUserList() {
      let data = await getUserList({})
      this.allUserLists = data.fst.map(item => {
        return { id: item.id, name: item.name, type: 'USER', code: item.code }
      })
      if (this.allUserLists.length > 10) {
        this.users = this.allUserLists.slice(0, 10)
      } else {
        this.users = this.allUserLists
      }
    }
 // 添加到下拉列表中    
addOptions(id) {
      const target = this.allUserLists.find(item => {
        return item.id === id
      })
      if (target) {
        if (this.users.every(item => item.id !== target.id)) {
          this.users.unshift(target)
        }
      }
    },
//接口返回的数据
  let resUserList = this.effect.actionDetail.exempt.condition.subject
      resUserList.forEach(x => {
        this.addOptions(x.id)
      })

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐