首页 > 其他分享 >Cascader 级联选择器 选择任意一级选项,去掉单选按钮。

Cascader 级联选择器 选择任意一级选项,去掉单选按钮。

时间:2022-10-31 10:58:38浏览次数:59  
标签:__ el 单选 Cascader radio border 选择器

Cascader 级联选择器 选择任意一级选项,去掉单选按钮。

 

步骤如下:

1.先设置父子节点取消选中关联,从而达到选择任意一级选项的目的

代码:

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

 

 

2.去掉radio单选框()

    全局添加以下css样式,注意如果只单独添加在vue组件内,样式无效。

代码:

 

.el-radio__inner {
    border-radius: 0;
    border: 0;
    width: 170px;
    height: 34px;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
    top: -18px;
    left: -19px;
}

.el-radio__input.is-checked .el-radio__inner {
    background: transparent;
}

 

 

3.watch监听el-cascader所绑定的值的变化,只要一变化就关闭下拉框。

 

 

 

 

watch: {
        regionCode: {
            handler() {
                if (this.$refs.cascaderRef) {
                    this.$refs.cascaderRef.dropDownVisible = false
                }
            },
            deep: true
        }
    }

 

标签:__,el,单选,Cascader,radio,border,选择器
From: https://www.cnblogs.com/yeminglong/p/16843542.html

相关文章