场景
如上图所示，左边展示分组及分组下的标签，点击某个标签，在右边展示某个标签的详情，可以对标签内容进行编辑保存，还可对标签进行搜索，默认展示全部标签，展开一级不目下标签，若对标签进行搜索筛选，则把每个节点都展开
实现准备
准备两棵树，一颗树存放全量标签，一棵树存放筛选后的标签
在获取懒加载数据时缓存第一个节点，在编辑标签保存后刷新列表时使用
每次编辑标签时，先把编辑的标签进行本地存储，在刷新树状列表完成后根据id进行高亮回显及标签展示
实现步骤
//这棵树是搜索标签时展示的树
<div v-if="Boolean(searchTreeList)">
<el-tree
ref="tree1"
class="trees"
@node-click="handleNodeClick"
:data="searchTreeList"
check-on-click-node
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"
:highlight-current="true"
:filter-node-method="filterNode"
default-expand-all
>
<div slot-scope="{ data }" class="text-hidden">
<el-tooltip
class="item"
effect="dark"
:content="data.name"
placement="top-start"
>
<span>
<qz-icon
class="icon-style icon-folder"
v-if="!data.isLabel"
></qz-icon>
{{ data.name }}
</span>
</el-tooltip>
</div>
</el-tree>
</div>
//这棵树是默认展示全量标签时展示的
<div class="data-tag-list" v-else>
<el-tree
v-if="!this.tags"
ref="tree"
class="trees"
@node-click="handleNodeClick"
:data="tagsList"
check-on-click-node
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"
:highlight-current="true"
:filter-node-method="filterNode"
:load="loadNode"
lazy
:default-expanded-keys="defaultExpend"
:current-node-key="defaultExpend[0]"
>
<div slot-scope="{ data }" class="text-hidden">
<el-tooltip
class="item"
effect="dark"
:content="data.name"
placement="top-start"
>
<span>
<qz-icon
class="icon-style icon-folder"
v-if="!data.isLabel"
></qz-icon>
{{ data.name }}
</span>
</el-tooltip>
</div>
</el-tree>
</div>
export default {
data(){},
methods:{
// 懒加载节点
loadNode(node, resolve) {
let that = this;
if (node && node.level === 0) {
//把节点缓存起来，在编辑标签保存后刷新懒加载列表时使用
this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
that.getTreeList(resolve);
} else {
this.getTreeList(resolve, node && node.data);
resolve([]);
}
},
// 获取树状节点
getTreeList(resolve, node = "") {
if (node.isLabel || this.tags) {
resolve([]);
} else {
let label = node
? node.categoryId
? node.categoryId + "-" + node.id
: node.id
: "";
// 获取树状数据
getTreeLabels(this.type, label)
.then((res) => {
// 获取上次编辑的标签
let current = JSON.parse(sessionStorage.getItem("currentLabel"));
if (current) {
// 如果含有搜索条件
if (this.filterText.trim()) {
this.$nextTick(() => {
//高亮上次编辑的标签
this.$refs.tree1 && this.$refs.tree1.setCurrentKey(current.id);
// 获取高亮节点的node节点
let currentNode =
this.$refs.tree1 && this.$refs.tree1.getNode(current.id);
// 触发高亮节点的点击事件，吧这个标签的详情展示在右边
currentNode?this.handleNodeClick(currentNode.data, currentNode):''
});
} else {//在展示全量标签
this.$nextTick(() => {
// 获取高亮标签的分组，并展开标签所在分组
this.defaultExpend = current.categoryId.split("-");
this.defaultExpend.push(current.id);
});
this.$nextTick(() => {
this.$refs.tree && this.$refs.tree.setCurrentKey(current.id);
let currentNode =
this.$refs.tree && this.$refs.tree.getNode(current.id);
currentNode?this.handleNodeClick(currentNode.data, currentNode):''
});
}
} else {
this.defaultExpend = [];
this.searchDefault(res.data);
}
resolve(res.data);
})
.catch((err) => {
console.log(err.msg || "");
});
}
},
// 点击标签展示详情
handleNodeClick(data, Node) {
// this.isShowSave = false;
this.isNew = false;
if (Node.level != 1 && data.isLabel) {
this.item = data;
this.rightTitle = data.name;
}
},
//默认展示最里面一层的第一个,如果是保存编辑后的刷新，则展示编辑项
searchDefault(arr) {
arr[0] && arr[0].id ? this.defaultExpend.push(arr[0].id) : "";
if (this.type == "field" && arr[0]) {
if (arr[0].children && arr[0].children.length) {
this.searchDefault(arr[0].children);
} else {
this.$nextTick(() => {
this.item = arr[0] || {};
this.rightTitle = arr[0].name;
this.$refs.tree && this.$refs.tree.setCurrentKey(this.rightTitle);
this.$refs.tree1 && this.$refs.tree1.setCurrentKey(this.rightTitle);
});
}
} else if (this.type == "table" && arr[0]) {
if (arr[0] && arr[0].tableChildren) {
this.searchDefault(arr[0].tableChildren);
} else {
this.$nextTick(() => {
this.item = arr[0] || {};
this.rightTitle = arr[0] && arr[0].name;
this.$refs.tree && this.$refs.tree.setCurrentKey(this.rightTitle);
this.$refs.tree1 && this.$refs.tree1.setCurrentKey(this.rightTitle);
});
}
} else if (!arr[0]) {
this.item = {};
this.rightTitle = "";
}
},
// 刷新树状列表(编辑标签保存后触发refresh方法)
refresh(res, save) {
if (this.filterText.trim()) {
getSearchLabels(this.type, this.filterText)
.then((res) => {
this.searchTreeList = res.data;
this.searchDefault(res.data);
})
.catch(() => {});
} else {
this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
}
}
},
mounted(){}
}