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

一架打字机

已于 2023-02-16 14:50:27 修改

阅读量1.3k

点赞数 1

文章标签： vue.js ui javascript Powered by 金山文档

于 2023-02-15 09:03:34 首次发布

本文链接：https://blog.csdn.net/iseyre/article/details/129036757

版权

有两种方法：
方法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])
          }
        })
      }