element的Cascader级联选择器怎么点击文字选中

element里的Cascader级联选择器需要点击前面点单选框或多选框才能选中这一项。

本来我的思路是想点击label的时候将选中的id放到绑定数据中，但没有找到点击label的回调函数（可能是我没看到，有找到的希望留言一下）

后来看到一篇文章，变了一下思路，很简单就解决了，就是样式跟之前不一样。

新思路就是将单选框宽度拉长覆盖label文字（相当于不显示单选框），即可实现点击文字就像点击单选框

效果图：

 

<el-cascader 
    v-model="ruleForm.folderName" 
    :options="treeData"
    :props="{ checkStrictly: true }" 
    clearable 
    ref="cascader" 
    @change="cascaderChange"
    popper-class="theder"//重点
></el-cascader>

.theder{
  .el-cascader-panel{
    .el-cascader-menu{
      .el-radio{
        height: 100%;
        width: 150px;
        opacity: 0;
        position: absolute;
        // z-index: 10;
        .el-radio__input{
          .el-radio__inner{
            border: 0px;
          }
        }
        .el-radio__input.is-checked{
          .el-radio__inner{
            background: none;
          }
        }
      }
    }
  }
}

参考文章：element的Cascader级联选择器怎么点击文字选中，并且取消前面圆圈按钮 - 程序员大本营