目次
効果の説明
プロジェクトのあるモジュールの左側は都市データのel-treeツリー構造、右側は都市のクエリ条件と結果表示です
。
- 左側の都市をクリックしてクエリを実行すると、右側の都市クエリ入力ボックスに同時に値が割り当てられます (たとえば、左側の成都をクリックすると、画面上の都市クエリ入力ボックスで成都が自動的に選択されます)右）
- 同様に、右側の都市クエリ入力ボックスで成都を選択すると、左側のツリー構造の成都ノードが自動的に展開されます。
実施原則
ステップ 1: el-tree がノードキーを設定する
まず知っておいていただきたいのは、node-key は展開や選択に必要な設定であり、そのバインド値はツリー全体で一意であり (一般にバインディング ID など)、重複がある場合はエラーが報告されます。ノードを同時に拡張する設定をする場合、このノードのIDが重複すると拡張がカオスになります。
注: ここで、特殊な場合には、バックグラウンドによって返されるツリー データが一意の値を持たない場合があることに注意してください (たとえば、ここではバインドされたフィールド ID がバインドされていますが、データ内では一部のデータ ID がバインドされる場合があります)。現時点では、バックエンドに ID を一意の値に処理させるか、取得したデータを自分で処理する必要があります (ここでは自分で処理します)。
ステップ 2: 遅延読み込み中にデータを処理し、ツリー データ全体に一意の値を追加する
データ量が多すぎるため、ここでの el-tree は遅延ロードを使用してデータを取得します (:load="loadNode")
<el-tree
ref="tree"
node-key="key"
accordion
@node-expand="nodeExpandFn"
:filter-node-method="filterNode"
:data="treeData"
:default-expanded-keys="expanded"
:props="defaultProps"
:indent="0"
lazy
auto-expand-parent
highlight-current
:load="loadNode"
@node-click="handleNodeClick"
>
</el-tree>
ご覧のとおり、node-key は key フィールドにバインドされており、これはデータ内の各オブジェクトに追加する一意の値です:
loadNode メソッドで、データを取得するときに一意の値を追加します。ここでは他のコードに注意してください。各ノードの特性に基づいて各ノード オブジェクトにキー フィールドを追加したことに注目してください(第 3 レベルのノード データ内の各オブジェクトの ID は同じです。そのため、キーフィールド)
loadNode(node, resolve) {
if (node.level === 0) {
this.resolve = resolve
this.chooseNode = node
queryKSHDeviceTree({
type: "0" }).then(res => {
const treeData = [];
res.resultValue.forEach(e => {
e.key = e.id; // key ----------------------
treeData.push(e);
});
resolve(treeData);
});
}
else if (node.level === 1) {
queryKSHDeviceTree({
type: '1' }).then(res => {
let treeData = [];
res.resultValue.forEach(e => {
e.key = e.id; // key ------------------------
treeData.push(e);
});
resolve(treeData);
});
} else if (node.level === 2) {
queryKSHDeviceTree({
type: '2',pId: node.data.id }).then(res => {
let treeData = [];
res.resultValue.forEach(e => {
// 这里根据当前对象自己的数据，拼出一个唯一值
e.key = node.data.id + e.pId; // key --------------------
treeData.push(e);
});
resolve(treeData);
});
}
}
ステップ 3: (リンク) 左側のツリー構造をクリックすると、右側の対応するクエリ ボックスに値が自動的に割り当てられます。
この手順は比較的単純で、el-treeのクリックイベントhandleNodeClick内で操作します。
// 如果右侧查询框绑定的字段为 queryForm.cityId
// 点击第二级节点，对其他查询框赋值也同理
handleNodeClick(data, node) {
if (data.label === "city") {
this.queryForm.cityId = data.id;
}
else if ...
}
ステップ 4: (リンケージ) 右側でクエリ条件を選択した後、[クエリ] をクリックすると、左側のツリー構造が対応するノードを自動的に展開します。
主にここで使用されます:default-expanded-keys="expanded" (デフォルトの展開ノード)
Expanded はキー値を格納する配列です。
其实当整个树形数据完整，并且设置了 auto-expand-parent
（展开子节点的时候自动展开父节点）的情况下，
这个时候expanded只用保存最后一级的key值即可
但是，由于我这里的数据是懒加载的，意味着虽然你右侧选了最后一级的数据，点击查询，
但我左侧的树形数据里，还并未加载子级数据，所以这个时候，
即时你将key存入expanded里，它找不到，所以也是没有用的
***所以这个时候，我们需要把每一级要展开的节点key字段都拿到，并存入expanded中
***这样，el-tree在自动展开某一节点时，它会根据懒加载方法，自动获取子节点的数据
***当子节点数据获取到后，它也会将每个节点的key自动去匹配expanded中的值，若存在相同的，
就会接着展开
！！！（简单的说，就是把每一级要展开的节点key字段都拿到，并存入expanded中，
同时懒加载方法写好，其他的交给el-tree自己就行）
テスト後、ノードを展開した後、expandedの値を代入し直すと、展開されたノードは自動的に閉じられないので、ここにもメソッドを書きます。まず、el-tree のすべてのノードを閉じます。
// 查询方法
queryClick() {
let obj = {
refName: 'tree2',
cityId: this.queryForm.cityId,
twoId: this.queryForm.twoId,
threeId: this.queryForm.threeId || ''
}
this.treeNodeLinkage(obj);
}
// 查询条件和el-tree显示联动
// cityId 为第一级id，twoId 为第二级，threeId 为第三级
treeNodeLinkage({
refName, cityId, twoId , threeId}) {
// 先将el-tree所有节点关闭
let nodesMap = this.$refs[refName].store.nodesMap; // 拿到全部的node
for(let key in nodesMap) {
nodesMap[key].expanded = false;
}
// 这里的第二级id，对应懒加载方法里 node.level === 2时候
// 所以这里的newId拼接方法，按照当时key的拼接方法来
let newId = cityId + twoId;
this.expanded = [cityId, newId];
if(threeId) {
this.expanded.push(threeId);
}
},
要約する
実際、この連携には主にel-tree のnode-key 属性とdefault-expanded-keys属性を理解する必要があります。
簡単に言うと、どのノードを展開したいかというと、そのノードのノードキーに対応するフィールドをdefault-expanded-keysに対応する配列に入れます。
もう一つはデータの加工で、
インターフェースで取得したデータを必要なものに加工するのですが、これはフロントエンドが何度も行う作業です。