目標效果:
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 } },