elementui级联下拉框怎么设置可选择任意一级选项以及设置后前面会出现1个单选按钮去掉单选按钮的方法和选好后下拉面板不自动收起的问题

一、elementui的级联下拉列表默认只能选择最末端的那个，如果需要点击哪个就可以选择哪个，需要做如下设置：

 

解决方法：在props属性增加{checkStrictly: true

 

<el-cascader :props="{ checkStrictly: true, }" ></el-cascader>

 

二、这样设置后又会出来1个问题级联下拉框设置可选择任意一级选项时前面会出现1个小圆圈以及选好后下拉面板不自动收起。

 

去掉单选框解决方法：在全局css文件中添加如下代码：

 

.el-cascader-panel .el-radio {

  width: 100%;

  height: 100%;

  z-index: 10;

  position: absolute;

  top: 0px;

  right: 10px;

}

.el-cascader-node__label {

  width: 157px;

}

.el-cascader-panel .el-radio__input {

  visibility: hidden;

}

.el-cascader-panel .el-cascader-node__postfix {

  top: 10px;

}

 

修改前：

 

 

修改后：

 

 

选好后下拉自动收到解决方法：

 

1，先给el-cascader  一个change事件

 <el-cascader @change="cascaderSelectChange" ref="cascaderRef"></el-cascader>

 

2，change事件函数：

 

   cascaderSelectChange() {

     // 自动收到下拉框

      this.$refs.cascaderRef.dropDownVisible = false

    },

 

最坑的是官网文档根本没提到dropDownVisible 这个属性，网上找资料找半天，心累。。。。