elementUI库 Cascader 级联选择器 选择任意一级选项，去掉单选按钮

最下面有 完整案例，不想看心理历程的可以直接到最下面复制代码

目标效果：

1. vue项目中需要使用el-cascader组件，可以选择任意一级的内容
    

预想效果图： （有三级情况下，想选择二级就选择二级）

 

遇到的问题：

1. 使用 使用官方案例的 （多选 单选框）直接点击 小圆点，点击文字没有效果
2. 想直接点击文字可以选中，如果有三级也随便打开三级，并且移除掉单选按钮

 

解决方案：

    解决问题前，我们需要知道这里其实有两个问题

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>

 

完整案例 

<template>
	<el-cascader
			v-model="value"
			:props="{ checkStrictly: true}"
			:options="options"></el-cascader>
</template>

<script>
  export default {
    data() {
      return {
        value: [],
        options: [ {
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则',
              children: [{
                value: 'yizhi',
                label: '一致'
              }, {
                value: 'fankui',
                label: '反馈'
              }, {
                value: 'xiaolv',
                label: '效率'
              }, {
                value: 'kekong',
                label: '可控'
              }]
            }, {
              value: 'daohang',
              label: '导航',
              children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
              }, {
                value: 'dingbudaohang',
                label: '顶部导航'
              }]
            }]
          }],
      }
    },
    methods: {}
  }

</script>
<style lang="less" 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>