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

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
        }
    }

 

 

 

vue3

 

 

const groupCascader = ref(null)
const groupPID = ref(['0'])

  watch(
    () => groupPID.value,
    () => {
      groupCascader.value.popperVisible = false
    }
  )