Cascader 級聯選擇器 選擇任意一級選項,去掉單選按鈕。


目標效果:

1.vue項目中需要使用el-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所綁定的值的變化,只要一變化就關閉下拉框。

分析:cascaderRef是聯級選擇器的名字,dropDownVisible:關閉下拉框,false關閉,true打開。這里的if條件去掉問題也不大,不過還是
加上比較保險。
cateLevel: function () {
   if (this.$refs.cascaderRef) {
      this.$refs.cascaderRef.dropDownVisible = false
    }
},


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM