情景：
需求：1. 树是懒加载，默认只展开第一级节点；2. 展开某个节点对其子节点新增操作；3. 新增成功后，树刷新并自动展开之前展开的节点
方法：
onLoadData(treeNode) {
return new Promise((resolve) => {
if (treeNode.dataRef.children) {
resolve();
return;
}
setTimeout(() => {
getMaterialSortTree({
ParentId: treeNode.dataRef.Id,
Name: this.searchValue,
}).then((response) => {
response.Result.forEach((item) => {
this.$set(item, "scopedSlots", { title: "slot" });
// 根据之前展开的节点数据找出应当展开的节点，并放进expandedKeys中
if (this.expandedKeys.filter((id) => id == item.Id).length > 0) {
this.expandedKeys.push(item.Id);
}
});
var childrenData = response.Result;
treeNode.dataRef.children = childrenData;
this.gData = [...this.gData];
});
resolve();
}, 1);
});
},
附上整个文件的代码，走你
<template>
<div class="manufact-tree">
<a-input-search placeholder="" enter-button @search="onSearch" />
<a-tree
v-if="gData.length"
:expanded-keys="expandedKeys"
:tree-data="gData"
:load-data="onLoadData"
:replace-fields="replaceFields"
@select="selectNode"
@expand="onExpand"
>
<template slot="slot" slot-scope="text">
<i style="color: #09e009" class="iconfont icon-quyu" />
<span v-if="text.Name.indexOf(searchValue) > -1">
{{ text.Name.substr(0, text.Name.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{
text.Name.substr(
text.Name.indexOf(searchValue) + searchValue.length
)
}}
</span>
<span v-else>{{ text.Name }}</span>
</template>
</a-tree>
</div>
</template>
<script>
import TreeIconTemplate from "@/components/TreeIconTemplate";
import { getMaterialSortTree } from "@/api/base-info/manufacturing-supplies/index.js";
import { mapActions } from "vuex";
export default {
components: { TreeIconTemplate },
data() {
return {
expandedKeys: [],
searchValue: "",
gData: [],
dataList: [],
replaceFields: {
title: "Name",
key: "Id",
scopedSlots: { title: "slot" },
},
selectedNode: null,
};
},
created() {
this.getTreeData({ ParentId: 0 });
},
methods: {
...mapActions(["changeTreeMonitorNode"]),
getTreeData(treeParameter) {
this.gData = [];
getMaterialSortTree(treeParameter).then(({ Result }) => {
this.gData = Result;
Result.forEach((item) => {
this.$set(item, "scopedSlots", { title: "slot" });
this.expandedKeys.push(item.Id);
});
this.selectNode(Result[0].Id, { node: { dataRef: Result[0] } });
});
},
onLoadData(treeNode) {
return new Promise((resolve) => {
if (treeNode.dataRef.children) {
resolve();
return;
}
setTimeout(() => {
getMaterialSortTree({
ParentId: treeNode.dataRef.Id,
Name: this.searchValue,
}).then((response) => {
response.Result.forEach((item) => {
this.$set(item, "scopedSlots", { title: "slot" });
if (this.expandedKeys.filter((id) => id == item.Id).length > 0) {
this.expandedKeys.push(item.Id);
}
});
var childrenData = response.Result;
treeNode.dataRef.children = childrenData;
this.gData = [...this.gData];
});
resolve();
}, 1);
});
},
onExpand(expandedKeys, { node }) {
this.expandedKeys = expandedKeys;
this.searchValue = "";
},
async onSearch(value) {
this.getTreeData({
Name: value,
ParentId: 0,
});
this.searchValue = value;
},
selectNode(selectedKeys, { node }) {
this.selectedKeys = selectedKeys;
this.$emit("select", node.dataRef);
this.selectedNode = {
Id: node.dataRef.Id,
Name: node.dataRef.Name,
MaterialType: node.dataRef.MaterialType,
ParentId: node.dataRef.ParentId,
module: "manufacturing",
getTreeData: this.getTreeData,
};
this.changeTreeMonitorNode(this.selectedNode);
},
},
};
</script>
<style lang="less" scoped>
.manufact-tree {
padding: 10px;
}
</style>
