不知道为什么。。。 单选是点文字可以的,但是多选情况下必须要选中方块才可以,非常蛋疼
也许可以去给提个pr?
Element - The world's most popular Vue UI framework
处理方式: 参element Cascader 多选 点击文字选中 - 码农教程
直接
1 .el-cascader-panel .el-checkbox { 2 width: 100%; 3 height: 100%; 4 z-index: 10; 5 position: absolute; 6 } 7 .el-cascader-node__label{ 8 margin-left: 10px; 9 } 10 /* 这个样式针对IE有用,不考虑IE的可以不用管*/ 11 .el-cascader-panel .el-cascader-node__postfix { 12 top: 10px; 13 }
但是又有个问题,我是两个级联,这样单击左边的时候,右边变成全部选中了,但是需求是只要展开就可以了,不用选中
那么用nth-child(选中的是兄弟节点)
只给第二级也就是even加这个效果
就可以做到点文字的时候选中了
<style lang="less">
// &:nth-child(even)
.el-cascader-menu:nth-child(even) {
.el-checkbox {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
}
}
.el-cascader-node__label{
margin-left: 10px;
}
/* 这个样式针对IE有用,不考虑IE的可以不用管*/
.el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}
</style>
此外还有一个获取点击的label
原生是获取不了label的
要先加一个ref
const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes(true) // 获取当前点击的节点
true就是只获得叶子节点
<el-cascader-panel
style="width:700px;"
v-model="cascaderValue"
:options="cascaderOptions"
:props="cascaderProps"
ref="cascaderAddr"
@change='handleCascaderChange'
@remove-tag='handleCascaderRemove'
filterable
clearable
:show-all-levels="false"
>