element Cascader 级联选择器 选择任意一级选项 以及点文字即可选中(去掉单选按钮)


目标效果:


1、vue项目中需要使用el-cascader组件,可以选择任意一级的内容
 
预想效果图: (有两级情况下,想只选择一级,就只选择一级)

 

 


 

遇到的问题:
1、使用 使用官方案例的 (多选 单选框)直接点击 小圆点,点击文字没有效果。
2、想直接点击文字可以选中,如果有三级也随便打开三级,并且移除掉单选按钮。
 
解决方案:

  解决可以任选一个选项方法:

// 使用官方提供的 checkStrictly 参数即可
 
checkStrictly: true
 
// 案例:
 
 <el-cascader
    :options="options"
    :props="{ checkStrictly: true }"
    clearable>
</
el-cascader>

解决点击文字即可选中,并移除单选按钮:

// 当使用了 checkStrictly 就会出现单选按钮,使用样式修改即可
<style rel="stylesheet/less">
    .el-cascader-panel .el-radio{
        width: 100%;
        height: 100%;
        z-index: 10;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .el-cascader-panel .el-radio__input{
        visibility: hidden;
    }
    .el-cascader-panel .el-cascader-node__postfix {
        top: 10px;
    }
</style>

 特别注意:这里样式一定是less语法,vue项目需要  npm install less less-loader -s 安装两个依赖才能生效。

参考自:https://blog.csdn.net/weixin_41854372/article/details/116838963


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM