天天看點

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所綁定的值的變化,隻要一變化就關閉下拉框。

Cascader 級聯選擇器 選擇任意一級選項,去掉單選按鈕。
watch: {
        regionCode: {
            handler() {
                if (this.$refs.cascaderRef) {
                    this.$refs.cascaderRef.dropDownVisible = false
                }
            },
            deep: true
        }
    }