0
点赞
收藏
分享

微信扫一扫

element Cascader级联选择器点击文字获取下一级数据同时选中

官网提供的例子点击radio为选中,点击label为获取下一级数据 image.png

项目需求点击label既要选中又要获取下一级数据,简单的方法是将单选框宽度拉长覆盖label文字(不显示单选框),即可实现点击文字就像点击单选框一样 image.png 代码如下:

<el-cascader 
v-model=ruleForm.deptId
:options=treeData
:props={ checkStrictly: true }
clearable
ref=cascader
@change=cascaderChange
popper-class=cascader //自定义浮层类名
>
</el-cascader>

.cascader{
.el-cascader-panel{
.el-cascader-menu{
.el-radio{
height: 100%;
width: 150px;
opacity: 0;
position: absolute;
.el-radio__input{
.el-radio__inner{
border: 0px;
}
}
.el-radio__input.is-checked{
.el-radio__inner{
background: none;
}
}
}
}
}
}
举报

相关推荐

0 条评论