记录：vue 让element-ui级联选择器选中后下拉框自动收起/解决懒加载后选择任意一级出现暂无数据

关注

已于 2023-02-16 14:50:27 修改 · 1.5k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

vue2项目中常用的两种数据懒加载方式前端项目优化分为懒加载和预加载1.懒加载顾名思义就是延迟加载，项目中常见的就是图片懒加载比如滚动条触底加载，虚拟列表，包括我们经常用的延时器加载数据，大家面试经常被问到后端返回十万条数据前端怎么渲染？这也是懒加载的内容。在项目中我们经常会遇到前后端通过websocket通信，数据会返回的很快，如果一下全部渲染出来必然会造成浏览器堵塞，前端页面卡顿，渲染不流畅等问题。这时候我们就用到了数据懒加载。我们首页图片比较多的时候会用到图片懒加载和滚动条触底加载这两种方式。阅读详情

有两种方法：
方法1：设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可
让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ checkStrictly: true }"

级联选择器如下：一定要设置ref
 <el-cascader
        v-model="value"
        :options="myoptions"
        :props="myprops" 
        :show-all-levels="false"
        @change="handleChange"
        class="cascaderBox"
        ref="cascaders"
      >
      </el-cascader>
然后在change事件中写：
handleChange(){
   if (this.$refs.cascaders) {
        this.$refs.cascaders.dropDownVisible = false
      }
}

方法2：直接在change事件中写：  this.$refs.cascaders.toggleDropDownVisible();

问题：在使用级联选择器并且使用了懒加载和设置了checkStrictly: true,（可选择任意一级）后，选中某一项却发现明明有数据却出现暂无数据的情况

解决：同样是在change事件中写上这一段判断

   const panelRefs = this.$refs.cascaders.$refs.panel
      if (panelRefs.activePath.length !== 0) {
        panelRefs.activePath.forEach(item => {
          if (item.children.length === 0) {
            panelRefs.lazyLoad(panelRefs.getCheckedNodes()[0])
          }
        })
      }