element Cascader 级联选择器 选择任意一级选项 以及点文字即可选中前方对应的单选按钮

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

• 目标效果
• 遇到的问题：
• 解决方案：
• • 解决可以任选一个选项方法：
  • 解决点击文字即可选中，并移除单选按钮：
• 注意

目标效果

有两级的情况，想只选一级，就只选一级

!在这里插入图片描述(https://i-blog.csdnimg.cn/direct/ef58787a775a416cba77d816ec0fb320.png

遇到的问题：

1、使用 使用官方案例的 （多选 单选框）直接点击 小圆点，点击文字没有效果。

2、想直接点击文字可以可选中前方对应的单选按钮，如果有三级也随便打开三级

解决方案：

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

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

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

// 当使用了 checkStrictly 就会出现单选按钮，使用样式修改即可，
<style lang="less" >
    .el-cascader-panel .el-radio{
	    position: absolute;
	    width: 100%;
	    left: 9px;
    }

</style>

注意

1、这里样式一定是less语法，vue项目需要 npm install less less-loader -s 安装两个依赖才能生效。

2、一定不要添加 scoped