vue?目錄樹的展開與關閉的實現

更新時間：2023年11月24日 10:07:40 作者：Ann_R

Vue作為一款流行的前端框架,提供了一種數據驅動的方式來實現目錄樹,本文主要介紹了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數組，用來保存展開節(jié)點的唯一值
 node-key="type_id"  //每個節(jié)點的唯一值，這里我的唯一值是type_id

data_option 數組如果沒有這個唯一值怎么辦，給它加一個

//list 是目錄樹節(jié)點以及目錄樹節(jié)點下的文件所組成的一個數組
this.data_option = this.addTypeIdToTreeNode(list);  

addTypeIdToTreeNode(lastList) {
      //傳進去的list是有tree又有file
      //給每個node節(jié)點添加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,
            }; // 創(chuàng)建一個新的節(jié)點，包括原有的屬性和新的 _id 屬性
            if (node.childrens && node.childrens.length > 0) {
              newNode.childrens = addIdToTree(node.childrens); // 遞歸處理子節(jié)點
            }
            return newNode;
          } else {
            const newNode = { ...node, type_id: node._id }; // 創(chuàng)建一個新的節(jié)點，包括原有的屬性和新的 _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、翻頁方法中控制目錄樹節(jié)點的展開與關閉

this.$nextTick(() => {
   this.$refs.tree.setCurrentKey(
     this.userArr[0].type_id  //高亮當前節(jié)點，type_id 唯一值確定節(jié)點
   );
   //展開高亮文件的目錄
   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、搜索目錄樹節(jié)點名稱控制節(jié)點的展開與關閉

//搜索
    goToSearch(){
      let treedata = this.data_option
      if(this.searchStr){
        //需要關閉所有節(jié)點 //除了上次搜索展開的節(jié)點還有自己點擊展開的節(jié)點
        this.changeTreeNodeStatus(this.$refs.tree.store.root)
        this.needExpandedNodes = []
        this.needExpandedKeys = []
        //獲取需要展開的節(jié)點數組
        this.findTypeCode(treedata, this.searchStr)
        this.needExpandedNodes.forEach(item=>{
          this.needExpandedKeys.push(item.type_id)
        })
        if(this.needExpandedKeys.length == 0){
          this.$message.error("沒有找到您搜索的目錄節(jié)點")
        }else{
          //模擬點擊該節(jié)點，使其高亮，默認高亮搜索出的第一個節(jié)點
          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 = []
      }
      
    },
    //循環(huán)拿到需要展開的目錄子節(jié)點
    findTypeCode(treeData, targetName) {
      // 遍歷樹結構
      for (let i = 0; i < treeData.length; i++) {
        const node = treeData[i];
        // 如果節(jié)點的 type_name 包含目標名稱，返回該節(jié)點的 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)
          }
        }
        
        // 如果節(jié)點有子節(jié)點，遞歸調用自身進行深度優(yōu)先搜索
        if (node.childrens && node.childrens.length > 0) {
          const result = this.findTypeCode(node.childrens, targetName);
          
          // 如果在子樹中找到了匹配的節(jié)點，返回結果
          if (result) {
            return result;
          }
        }
      }
      // 如果沒有找到匹配的節(jié)點，返回 null 或者適合您的默認值
      return null;
    },
    changeTreeNodeStatus(node) {
      node.expanded = false
      for (let i = 0; i < node.childNodes.length; i++) {
        // 改變節(jié)點的自身expanded狀態(tài)
        node.childNodes[i].expanded = this.defaultExpand
        // 遍歷子節(jié)點
        if (node.childNodes[i].childNodes.length > 0) {
          this.changeTreeNodeStatus(node.childNodes[i])
        }
      }
    },

記錄一個比較重要的點：高亮某行目錄樹節(jié)點

this.handleNodeClick(this.needExpandedNodes[0],this.$refs.tree.getNode(this.needExpandedKeys[0]))

//即：
this.handleNodeClick(node, this.$refs.tree.getNode(node))
//node為 目錄樹的一個節(jié)點，在我這兒比如data_option數組中的某個對象

到此這篇關于vue 目錄樹的展開與關閉的實現的文章就介紹到這了,更多相關vue 目錄樹內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: