<el-tree
:data="data_option"
ref="tree"
:props="defaultProps"
@node-click="handleNodeClick"
:default-expanded-keys="needExpandedKeys"
node-key="type_id"
highlight-current
>
</el-tree>
expandedKeys: [], //所有treenode的id
needExpandedKeys: [], //需要展开的treenode的id数组
needExpandedNodes:[],//需要展开的treenode的node数组
关键在于以下两行代码
:default-expanded-keys="needExpandedKeys" // needExpandedKeys数组,用来保存展开节点的唯一值
node-key="type_id" //每个节点的唯一值,这里我的唯一值是type_id
data_option 数组如果没有这个唯一值怎么办,给它加一个
//list 是目录树节点以及目录树节点下的文件所组成的一个数组
this.data_option = this.addTypeIdToTreeNode(list);
addTypeIdToTreeNode(lastList) {
//传进去的list是有tree又有file
//给每个node节点添加type_id,用来展开目录设置唯一值
let treeData = lastList;
const addIdToTree = (treeData) => {
return treeData.map((node, index) => {
if (!node._id) { //根据自己目录树数组的实际情况修改,因为我这个_id有用所以需要判断
const newNode = {
...node,
type_id: node.type_code == 0 ? "wfl000" : node.type_code,
}; // 创建一个新的节点,包括原有的属性和新的 _id 属性
if (node.childrens && node.childrens.length > 0) {
newNode.childrens = addIdToTree(node.childrens); // 递归处理子节点
}
return newNode;
} else {
const newNode = { ...node, type_id: node._id }; // 创建一个新的节点,包括原有的属性和新的 _id 属性
return newNode;
}
});
};
const treeDataWithId = addIdToTree(treeData);
let str = [];
const getStr = function (list) {
list.forEach(function (row) {
if (row.childrens) {
str.push(row.type_id);
getStr(row.childrens);
} else {
str.push(row.type_id);
}
});
};
getStr(treeDataWithId);
this.expandedKeys = str;
// console.log("需要展开的treenode", this.expandedKeys);
// console.log("需要展开的treeDataWithId", treeDataWithId);
return treeDataWithId;
},
1、翻页方法中控制目录树节点的展开与关闭
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(
this.userArr[0].type_id //高亮当前节点,type_id 唯一值确定节点
);
//展开高亮文件的目录
this.expandedKeys.forEach((node) => {
if (
//this.indexLocation 翻页之后是a文件,a文件的下标
this.userArr[this.indexLocation].type_id.indexOf(node) !== -1
) {
this.needExpandedKeys.push(node);
}
});
this.needExpandedKeys.forEach((node) => {
this.$refs.tree.store.setCheckedNodes([node], true);
});
});
2、搜索目录树节点名称控制节点的展开与关闭
//搜索
goToSearch(){
let treedata = this.data_option
if(this.searchStr){
//需要关闭所有节点 //除了上次搜索展开的节点还有自己点击展开的节点
this.changeTreeNodeStatus(this.$refs.tree.store.root)
this.needExpandedNodes = []
this.needExpandedKeys = []
//获取需要展开的节点数组
this.findTypeCode(treedata, this.searchStr)
this.needExpandedNodes.forEach(item=>{
this.needExpandedKeys.push(item.type_id)
})
if(this.needExpandedKeys.length == 0){
this.$message.error("没有找到您搜索的目录节点")
}else{
//模拟点击该节点,使其高亮,默认高亮搜索出的第一个节点
this.handleNodeClick(this.needExpandedNodes[0],this.$refs.tree.getNode(this.needExpandedKeys[0]))
}
console.log("needExpandedKeys",this.needExpandedKeys)
}else{
this.changeTreeNodeStatus(this.$refs.tree.store.root)
this.needExpandedNodes = []
this.needExpandedKeys = []
}
},
//循环拿到需要展开的目录子节点
findTypeCode(treeData, targetName) {
// 遍历树结构
for (let i = 0; i < treeData.length; i++) {
const node = treeData[i];
// 如果节点的 type_name 包含目标名称,返回该节点的 type_code
if (node.type_name.includes(targetName)) {
// if (node.type_name==targetName) {
console.log(node.type_id)
if(node.type_id){
this.needExpandedNodes.push(node)
}
}
// 如果节点有子节点,递归调用自身进行深度优先搜索
if (node.childrens && node.childrens.length > 0) {
const result = this.findTypeCode(node.childrens, targetName);
// 如果在子树中找到了匹配的节点,返回结果
if (result) {
return result;
}
}
}
// 如果没有找到匹配的节点,返回 null 或者适合您的默认值
return null;
},
changeTreeNodeStatus(node) {
node.expanded = false
for (let i = 0; i < node.childNodes.length; i++) {
// 改变节点的自身expanded状态
node.childNodes[i].expanded = this.defaultExpand
// 遍历子节点
if (node.childNodes[i].childNodes.length > 0) {
this.changeTreeNodeStatus(node.childNodes[i])
}
}
},
记录一个比较重要的点:高亮某行目录树节点
this.handleNodeClick(this.needExpandedNodes[0],this.$refs.tree.getNode(this.needExpandedKeys[0]))
//即:
this.handleNodeClick(node, this.$refs.tree.getNode(node))
//node为 目录树的一个节点,在我这儿比如data_option数组中的某个对象