サイト開発者Dotnet9がウェブサイトのバックエンドフロントエンドの記事編集カテゴリ管理機能を開発中に、
element-uiのtreeコンポーネントの使用で問題に遭遇しました。個人で試行錯誤しても解決できず、以下はフロントエンドの達人が提供した解決策です。問題が何で、どのように解決したのか、ぜひご覧ください。皆さんのお役に立てれば幸いです。
本文開始
はじめに：element-uiのtreeコンポーネントを使用する際、default-checked-keys属性の値を動的に変更すればデフォルトのチェック状態もそれに応じて変わると思っていましたが、実際にはそうではないことがわかりました。
まず、公式サイトでのdefault-checked-keysの定義を見てみましょう：（見た限りでは問題ないように思えます）
そこで原因を探ってみました：defaultCheckedKeysの変更を監視して配列をループし、選択状態を追加しますが、defaultCheckedKeys配列が減少した場合、以前に設定された選択済みのkeyはキャンセルされません。
原因は：tree.vueでwatchを使ってdefault-checked-keys値の変化を監視し、次のメソッドを呼び出していることです：
tree-store.js 内でこのメソッドがさらに使用されています：
やっと原因がわかりました。default-checked-keys値の変化を監視したときだけ、default-checked-keys配列をループしてその中の値に選択状態を設定しますが、選択状態をキャンセルする操作はありません。そのため、default-checked-keysの元の配列に選択すべきデータを追加すると、新しいノードは選択されますが、逆の場合は選択されません！！！
どうすればいいのでしょうか？？？
アイデア：
- 依存コードを修正する
このブログですでに触れています：el-tree 大量データの処理
- もう一度ドキュメントをよく見てアイデアを探しました：見つけました。
setCheckedKeysメソッドを呼び出し、選択したいkey値の配列を渡すと、選択状態が再設定されます：
このメソッドを使用する際の注意点：
treeが既にDOMに存在している状態で呼び出すこと。treeがロード完了していないとsetCheckedKeysは存在しません。そのため、this.$nextTick(callback)メソッドを使用する必要があります。このメソッドはDOMがロード完了した後にコールバック関数を実行します。このメソッドを呼び出した後、遅延ロードでノードを読み込んでいる場合、手動で設定した半選択状態が失われることがあります。半選択をリセットすることを忘れないでください。
本記事は転載です。
著者：水星夢月
原文タイトル：el-tree 中 default-checked-keys 属性変化不生效 (el-treeにおけるdefault-checked-keys属性の変更が反映されない)
原文リンク：https://blog.csdn.net/monparadis/article/details/114087838