element Cascader 点击文字选中+选中隐藏+多选

element Cascader 级联选择器只能通过点击文字前边的icon选中，且选中后选择框不会隐藏

现在的需求是可以选中任意一级，需要点击文字选中且选中后选择框隐藏

HTML结构

<el-form-item label="组织者" prop="organizer">
                  <el-cascader
                    ref="organizerUnit"
                    v-model="temp.organizer"
                    :options="joinPeopleList"
                    :disabled="isShow.isDisabled"
                    :props="{ checkStrictly: true , value: 'id', label: 'name',}"
                    placeholder="请选择组织者"
                    :show-all-levels="false"
                    expand-trigger="hover"
                    class="w100_pidR30"
                    @change="organizerUnit"
                  />
  </el-form-item>

选中隐藏选择框

通过ref实现隐藏

/**
     * 组织者点击选择隐藏选择框
     */
    organizerUnit(a) {
      if (this.$refs.organizerUnit) {
        this.$refs.organizerUnit.dropDownVisible = false
      }
    },

点击文字选中

方案一：setInterval

 // 因组件阻止了冒泡 点击文本就让它自动点击前面的input就可以触发选择。【记得卸载】
 this.ElementSibling = setInterval(function() {
          if (document.querySelectorAll('.el-cascader-node__label').length) {
            document
              .querySelectorAll('.el-cascader-node__label')
              .forEach(el => {
                el.onclick = function() {
                  if (this.previousElementSibling) {
                    this.previousElementSibling.click()
                  }
                }
              })
          }
        }, 1000)

方案二：css

 .el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    /* margin-right: 10px; */
    /* right: 10px; */
  }
.el-cascader-node__label{
  margin-left: 10px;
}
    /* 这个样式针对IE有用，不考虑IE的可以不用管*/
  .el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
  }

// setInterval比较耗性能，css会污染全局。具体选择哪种，根据项目环境决定