<el-cascader>组件实现选择点击文字任意级选中

最终实现效果图：

 

<el-cascader>组件配置项：

<el-cascader
  key="cascaderAddr10"
  filterable
  ref="cascaderAddr"
  v-model="form.projectType"
  :options="projectTypeList"
  :props="{ value:'id',label:'directoryName',checkStrictly:true}"
 @click.native="projectTypeLeableClick"
 popper-class="projectTypeSelectPopper"
/>

projectTypeLeableClick(event){
  let that = this  // 保存当前Vue实例的引用
  this.$nextTick(() => {  // 等待DOM更新后执行
    // 获取下拉面板的DOM元素（通过自定义的popper-class）
    let d = document.getElementsByClassName("projectTypeSelectPopper");
    
    if( d[0] && !d[0].onclick ){  // 如果面板存在且未绑定点击事件
      d[0].onclick = function(e) {  // 给下拉面板绑定点击事件
        // 判断点击的是否是选项的文本标签
        if(e.target.className == "el-cascader-node__label" ){
          // 找到文本标签前面的单选框元素并触发点击
          e.target.previousElementSibling.click();
          
          // 手动关闭下拉面板
          that.$refs.cascaderAddr.dropDownVisible = false;
        }
      }
    }
  });
}

 去掉前面的单选按钮：

<style lang="scss">

.mySelectPopper .el-radio, .projectTypeSelectPopper .el-radio{

  display: none;

}

</style>