elementUI 级联选择器点击label文字部分选中及选中后收起菜单

        elementUI的级联选择器，在单选选择任意一级选项模式下，必须点击选项中的圆圈才能选中该项，且选中后菜单不会自动收起，得点击下拉框以外的代码才能收起。

         在实际开发中为了考虑用户操作的简便性，想实现点击label文字内容可以直接选中该项，且选中后收起菜单。

1 点击label文字内容选中选项

html:

<el-cascader
    ref="elcascader"
    :options="options"
    :props="{ checkStrictly: true }"
    v-model="value"
    clearable
    @visible-change="elCascaderOnClick"
    @expand-change="elCascaderOnClick">
</el-cascader>

ts: 

 elCascaderOnClick() {
    setTimeout(() => {
      document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
        (el as any).onclick = function () {
          this.previousElementSibling.click();
        };
      });
    }, 100);
  }

2 选中后收起菜单

        监听改选择器绑定值的变化，当选中值改变时收起下拉菜单。

@Watch("value") 
onValueChange() {
    if(this.$refs.elcascader){
        this.$refs.elcascader.dropDownVisible = false;
    }
}