vue 目录树的展开与关闭

<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_optionif(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_codeif (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 = falsefor (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数组中的某个对象