<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數組中的某個對象