vue2 - 解决treeselect树形组件获取焦点后无法关闭element的选择器和日期选择器的问题

Posted 会飞の小蜜蜂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2 - 解决treeselect树形组件获取焦点后无法关闭element的选择器和日期选择器的问题相关的知识,希望对你有一定的参考价值。

问题:

vue2

 

 

解决:

treeselect添加@open="openFun"

/**
       * 菜单打开时发出
       */
      openFun() 
        this.$bus.$emit("closeSelect");
        this.$bus.$emit("closeDatePicker");
      ,

选择器el-select添加ref="elSelect"

mounted() 
      /**
       * 收起下拉菜单
       * this.$bus.$emit("closeSelect");
       */
      this.$bus.on("closeSelect",()=>
        if(this.$refs.elSelect) 
          this.$refs.elSelect.blur();
        
      )
    ,
    beforeDestroy() 
      this.$bus.off(closeSelect);
    ,

日期选择器el-date-picker添加ref="elDatePicker"

mounted() 
        /**
         * 关闭日期时间选择器
         * this.$bus.$emit("closeDatePicker");
         */
        this.$bus.on("closeDatePicker",()=>
            if(this.$refs.elDatePicker) 
                this.$refs.elDatePicker.pickerVisible = false;
            
        )
    ,
    beforeDestroy() 
      this.$bus.off(closeDatePicker);
    ,

 

前端菜鸟一枚,习惯记录平时遇到的一些问题和学习笔记,觉得有用的可以点个支持!

以上是关于vue2 - 解决treeselect树形组件获取焦点后无法关闭element的选择器和日期选择器的问题的主要内容,如果未能解决你的问题,请参考以下文章

Ant Design TreeSelect树形选择器禁用父节点

el-treeselect

Vue实现树形下拉框

vue2 递归组件--树形学习分享

react-native树形结构选择组件

react 使用antd的TreeSelect树选择组件实现多个树选择循环