Vue3のel-tree-selectで逆選択が設定できない問題を解決するにはどうすればよいですか？

環境: Vue3.2、Element Plus

問題: サブコンポーネント settings.vue => ポップアップ コンポーネント ダイアログ => ツリー選択コンポーネント el-tree-select、デフォルトの選択はできませんsetdefault-checked-keys

シナリオ: バックグラウンド システムのリスト ページで、データの行を選択し、設定ボタンをクリックし、いくつかの機能を割り当てます。ここでの方法は、設定ページをサブクラスにカプセル化し、Element Plus のダイアログ コンポーネントをサブクラスにカプセル化することです。

次に、ダイアログ内に初期化する必要がある El-Tree-SELECT があります。 allocation 、それは以前に割り当てられている可能性があり、逆選択を設定する必要があります

最初は次のように直接記述しました:

<template>
  <el-tree-select

:data="store().UserMenus "

:default-expanded-keys="['xxxxxxxx']" 
  />
</template>

その後、有効になっていないことがわかりました。その理由は金曜日に推測できます。データにバインドされた pinia グローバル状態の値は、コンポーネントのインスタンス化時にロードされていない可能性があるため、ロードすることはできませんノード データ、コンポーネントの作成後、データには値が含まれますが、default-expanded-keys は再度リセットされず、コンポーネントにはドロップダウン データが含まれますが、逆選択効果はありません。

最初は簡単な問題だと思って頭を使いましたが、順序が関係するので当然ライフサイクルも考慮して、setting.vueにonMountedを追加して値を代入し直しました。ここ:

// script ts
const list = ref()
const selectArr = ref([])
onMounted(() => {
　　list.value = store().UserMenus
　　selectArr.value = ['xxxxxxxx']
})
 
// setting.vue
<template>
  <el-tree-select 
　　　 :data="list"
    :default-expanded-keys="selectArr" 
  />

データは list 変数にバインドされ、default-expanded-keys は selectArr にバインドされます。まあ、大丈夫かと思ったのですが、結局、反選挙は失敗に終わりました。ただ…とんでもない~

通常、onMounted関数でコンポーネントの作成とDomの作成が完了しているので、この時点でリストの値を設定し、selectArrを設定できるはずです。しかし実際には、反選挙は依然として成功しなかった。

これはまだ読み込みに問題があることを示しています。研究精神で別の方法を考えました。el-tree-select の API (setCheckedKeys) を呼び出すことでデフォルト値を設定できます。 ！

テンプレート参照を通じて、el-tree-select を取得し、tree という名前を付けてから、onMounted に戻って出力します: console.log(tree.value)、いいですね、未定義です。これは設定でそれを示しています. VueのonMountedでは選択したキーを全く設定できません。そして奇妙なことに、コードを繰り返し変更すると、ホット リロードにより、それに応じて Vue ページが更新され、実際に選択されるようになりました。しかし、更新するとすぐに逆選択が無効になってしまいました。 enmmmm ..... 基本的に問題は見つかりました。OnMounted がコンポーネントを取得できません。後で onUnmounted を試したところ、うまくいくことがわかりましたが、これは私の初期化ロジックであり、onUnmounted に書き込むことは不可能です。

この問題を引き起こす別の要因があります。つまり、ダイアログがデフォルトでは表示されません。表示と非表示は、v-model="dialogVisible" にバインドされた変数によって制御されます。初期化値は false です。理由の 1 つは、最初にdialogVisible.value = true に設定した場合、選択を反転しても問題ありませんが、それでも true に設定できないため、最初にポップアップ ウィンドウが表示されないことです。

私は金曜日の午後、基本的にこの場所で立ち往生していました。週末 (キャニオン ティミ) でリラックスした後、月曜の朝、通勤途中に見直して、Dialog 自体から答えを探すことを検討しました。予想どおり、その API 開かれたメソッド、ダイアログがアニメーションを開くときのコールバックがあります。ここで初期化を行い、問題は解決しました:

// Dialog
@opened="opened"

// script ts 
const opened = () => {
     selectArr.value = ['xxxxxxxx']
}

このアイデアを見つけることができたもう 1 つの理由は、以前はフォームのsubmitイベントで常にフォームオブジェクトが取得できていたのですが、onMountedでも取得できるか試してみましたが結果は同様でした。ボタンを配置すると、ボタンをクリックするまでにページ上のすべてが読み込まれているため、ボタンのクリック イベントでコンポーネントを取得できます。同様に、ダイアログを開くアニメーションが終了するときのコールバックで、ページは次のようにする必要があります。すべての値が存在するため、現時点では初期化中にキーが見つからないという問題は発生しません。

rree

以上がVue3のel-tree-selectで逆選択が設定できない問題を解決するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。