elementUI カスケード セレクター ラベル テキストをクリックして選択し、選択後にメニューを閉じます

        elementUI のカスケード セレクター。第 1 レベルのオプションを単一選択するモードでは、オプション内の円をクリックして項目を選択する必要があります。選択後にメニューは自動的に折りたたまれません。ドロップの外側のコードをクリックする必要があります。 -ダウンボックスを折りたたむことができます。

         実際の開発では、ユーザーの操作のしやすさを考慮して、ラベルのテキスト内容をクリックしたい場合は、項目を直接選択し、選択後にメニューが折りたたまれます。

1 ラベルのテキストの内容をクリックしてオプションを選択します

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;
    }
}