前の記事では、、友人がカスタムノードをサポートすることはできませんメッセージを残して、彼らはそれが実現可能であると考えて、エルツリーの主な用途のアイデアは、現在のノードキーとhighlight-current属性は、次のような図
<el-tree
:data="deptTree"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
current-node-key="723fccadcf2c0f8cdbbe4ebb4d"
highlight-current
node-key="id"
ref="tree"
default-expand-all
@node-click="handleNodeClick"
@node-drop="handleDrop"
draggable
>
コードは以下の通りです。
watch: {
// 部門ツリーを名前で絞り込む
deptName(val) {
this.$refs.tree.filter(val);
},
// ツリーの最初のノードをデフォルトでクリックする
deptTree(val) {
if (val) {
this.$nextTick(() => {
//this.$refs.tree.setCurrentKey('723fccadcf2c0f8cdbbe4ebb4d');
document.querySelector(".is-current").firstChild.click();
});
}
}
},
いくつかの点を明確にする必要がある、現在のノードキーがオンになっているときに、ツリーノード要素のフロントエンドの生成は、判断は、選択したノードを設定するには、setCurrentKeyを使用していないことに注意してくださいを通じて、is-currentスタイルになります、テストは無効です、理由は、ページの要素は、図のようにロードされていない必要があります：
全体的な感想
背景には、クリックする必要があるノードIDを返し、それが唯一の現在のノードキーバインディングの戻り値を介して、単一の、非配列、形式の要件にすることができますし、時計で聞くことに注意する必要があり、あなたは、カスタムノードのクリックを完了することができます。
BUG
current-node-key="723fccadcf2c0f8cdbbe4ebb4d" 友人が [Vueの警告]が 表示されることを指摘した ： 動的割り当てを行う際に nextTickのエラー： "TypeError：nullのプロパティ 'firstChild'を読み取ることができません " エラーは、一見したところ、私はそれが問題を引き起こしている現在のノードキーの設定でなければならないと思います。問題が解決された後、元のコードを部分的に修正しました：
<el-tree
:data="deptTree"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
highlight-current
node-key="id"
ref="tree"
default-expand-all
@node-click="handleNodeClick"
@node-drop="handleDrop"
draggable
>
JavaScript：
watch: {
// 部門ツリーを名前で絞り込む
deptName(val) {
this.$refs.tree.filter(val);
},
// 選択されたキー
nodeKey(val) {
if (val) {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(val);
this.$nextTick(() => {
document.querySelector(".is-current").firstChild.click();
});
});
}
}
},
mounted() {
// 部門ツリーのデータを取得する
this.getTreeDept();
},
methods: {
/** クエリー部門のドロップダウンツリー構造*/
getTreeDept() {
DeptAPI.treeDept().then(response => {
this.nodeKey = '723fccadcf2c0f8cdbbe4ebb4d';
this.deptTree = response.treeList;
this.checkedSet = response.checkedSet;
});
},
}
上記のカスタムノードのデフォルトのクリックイベントを実現することができ、コアは$ nextTickの使用にあり、Vueの公式ウェブサイトの説明：遅延コールバックの実行終了後、次のDOMの更新ループで。データを変更した直後にこのメソッドを使用して、更新されたDOMを取得します。
感謝します。
ソース:
