ElementUI Cascader 级联选择器实现点击文本选中

一、遇到的问题

  • 使用官方案例级联选择器时,只有点击前面小圆点才能选中,点击文本无法选中。

二、需求

  • 级联选择器各层级都能选中,并且点击文本也能选中

三、相关代码

<el-cascader
	v-model="selectCateIds"
	:options="twoCateList"
	:props="{ checkStrictly: true, label: 'cat_name', value: 'cat_id', children: 'children' }"
	clearable
	@change="handleCateChange"
	popper-class="popper-custom"  // 重点,自定义浮层类名
></el-cascader>
// 级联选择器自定义浮层类名,实现 前面单选框隐藏,点击文本即可选中 功能
.popper-custom {
  .el-cascader-panel{
    .el-cascader-menu{
      .el-radio{
        height: 100%;
        width: 150px;
        opacity: 0;
        position: absolute;
        .el-radio__input{
          .el-radio__inner{
            border: none;
          }
        }
        .el-radio__input.is-checked{
          .el-radio__inner{
            background: none;
          }
        }
      }
    }
  }
}

你可能感兴趣的:(#,ElementUI,elementui)