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