el-cascader

常见问题

级联禁用：选择任意一级选项能查看但是无法选中

首先设置设置 checkStrictly: true 让任意一级可以选中，然后隐藏掉radio标签。

// 设置popper-class的值为cascaderParent
<el-cascader
  v-model="form.parentUuid"
  :options="optionsData"
   :props="{ expandTrigger: 'hover', checkStrictly: true}"
  placeholder="请选择"
  popper-class="cascaderParent"
></el-cascader>
 
// css 样式
<style>
/* 第一列不可被选择 *、*
/* 注意：先找我们指定的类名为cascaderParent的面板 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
  display: none;
}
 
/* 指定的第n列不可被选择 */ 
.cascaderParent .el-cascader-panel .el-scrollbar:nth-child(n+1) .el-radio {
  display: none;
}
</style>

选择任意一级的数据，并隐藏 radio 标签

第一种方法：实现思路是隐藏radio标签， 点击文字时自动选中radio标签。首先，需要设置 checkStrictly: true 让任意一级可以选中，然后节点展开的时候为文字 el-cascader-node__label 添加点击事件，自动选中radio标签。

// 设置popper-class的值为cascaderParent
<el-cascader
  v-model="form.parentUuid"
  :options="optionsData"
   :props="{ expandTrigger: 'hover', checkStrictly: true}"
  placeholder="请选择"
  popper-class="cascaderParent"
  @expand-change="onExpandChange" />
//js
methods:{
		async onExpandChange() {
		  await this.$nextTick(); // 需要等页面完全渲染好之后再进行事件绑定
		  document.querySelectorAll('.el-cascader-node__label').forEach(el => {
		    el.onclick = function () {
		      if (this.previousElementSibling) this.previousElementSibling.click()
> 		    }
		  })
		}
    }
   },
// css 样式
<style>
/* 指定的第n列不可被选择 */
.cascaderParent .el-cascader-panel .el-scrollbar:nth-child(n+1) .el-radio {
  display: none;
}
</style>

第二种方法：纯css实现，使用css将小圆圈变透明然后覆盖在整个文字上方，点击文字的时候其实是在点击小圈圈。

<style>
/*以下样式将单选框隐藏，并绝对定位与文字内容一样大小，这样点击时可以点击整行文字*/
.el-cascader-panel .el-radio{
 position:absolute;
 z-index:10;
 padding:0 10px;
 width:132px;
 height:34px;
 line-height:34px;
}
.el-cascader-panel .el-radio__input{
 visibility:hidden;
}
.el-cascader-panel .el-input-node__postfix{
 top:10px;
}
 

el-cascader 勾选内容后自动关闭内容选择面板

element-plus 和 element-ui的el-cascader面板关闭方式有点不同。

element-ui的关闭方式

onChange() {
  this.$refs.cascaderRef.dropDownVisible = false
}

而element-plus的关闭方式

 
CascaderRef.value.togglePopperVisible() // vue3.0写法
 
this.$refs.CascaderRef.togglePopperVisible() //vue2.0写法
 
//如果面板没有关闭，则手动关闭
if (CascaderRef.value.popperVisible) {
  CascaderRef.value.togglePopperVisible() 
}

阅读更多内容可以查看：

• element-plus 、element-ui —— Cascader 勾选内容后自动关闭内容选择面板