亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue?目錄樹的展開(kāi)與關(guān)閉的實(shí)現(xiàn)

 更新時(shí)間:2023年11月24日 10:07:40   作者:Ann_R  
Vue作為一款流行的前端框架,提供了一種數(shù)據(jù)驅(qū)動(dòng)的方式來(lái)實(shí)現(xiàn)目錄樹,本文主要介紹了vue?目錄樹的展開(kāi)與關(guān)閉的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下

本文主要介紹了 vue 目錄樹的展開(kāi)與關(guān)閉,具體如下:

<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: [], //需要展開(kāi)的treenode的id數(shù)組
needExpandedNodes:[],//需要展開(kāi)的treenode的node數(shù)組

關(guān)鍵在于以下兩行代碼

 :default-expanded-keys="needExpandedKeys"  // needExpandedKeys數(shù)組,用來(lái)保存展開(kāi)節(jié)點(diǎn)的唯一值
 node-key="type_id"  //每個(gè)節(jié)點(diǎn)的唯一值,這里我的唯一值是type_id

data_option 數(shù)組如果沒(méi)有這個(gè)唯一值怎么辦,給它加一個(gè)

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

addTypeIdToTreeNode(lastList) {
      //傳進(jìn)去的list是有tree又有file
      //給每個(gè)node節(jié)點(diǎn)添加type_id,用來(lái)展開(kāi)目錄設(shè)置唯一值
      let treeData = lastList;
      const addIdToTree = (treeData) => {
        return treeData.map((node, index) => {
          if (!node._id) {  //根據(jù)自己目錄樹數(shù)組的實(shí)際情況修改,因?yàn)槲疫@個(gè)_id有用所以需要判斷
            const newNode = {
              ...node,
              type_id: node.type_code == 0 ? "wfl000" : node.type_code,
            }; // 創(chuàng)建一個(gè)新的節(jié)點(diǎn),包括原有的屬性和新的 _id 屬性
            if (node.childrens && node.childrens.length > 0) {
              newNode.childrens = addIdToTree(node.childrens); // 遞歸處理子節(jié)點(diǎn)
            }
            return newNode;
          } else {
            const newNode = { ...node, type_id: node._id }; // 創(chuàng)建一個(gè)新的節(jié)點(diǎn),包括原有的屬性和新的 _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("需要展開(kāi)的treenode", this.expandedKeys);
      // console.log("需要展開(kāi)的treeDataWithId", treeDataWithId);
      return treeDataWithId;
    },

1、翻頁(yè)方法中控制目錄樹節(jié)點(diǎn)的展開(kāi)與關(guān)閉

this.$nextTick(() => {
   this.$refs.tree.setCurrentKey(
     this.userArr[0].type_id  //高亮當(dāng)前節(jié)點(diǎn),type_id 唯一值確定節(jié)點(diǎn)
   );
   //展開(kāi)高亮文件的目錄
   this.expandedKeys.forEach((node) => {
     if (
      //this.indexLocation 翻頁(yè)之后是a文件,a文件的下標(biāo)
       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é)點(diǎn)名稱控制節(jié)點(diǎn)的展開(kāi)與關(guān)閉

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

記錄一個(gè)比較重要的點(diǎn):高亮某行目錄樹節(jié)點(diǎn)

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

//即:
this.handleNodeClick(node, this.$refs.tree.getNode(node))
//node為 目錄樹的一個(gè)節(jié)點(diǎn),在我這兒比如data_option數(shù)組中的某個(gè)對(duì)象

到此這篇關(guān)于vue 目錄樹的展開(kāi)與關(guān)閉的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 目錄樹 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家! 

相關(guān)文章

  • 說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法

    說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法

    這篇文章主要介紹了說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-01-01
  • vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng)

    vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng)

    這篇文章主要為大家詳細(xì)介紹了vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • 基于Vue實(shí)現(xiàn)拖拽功能

    基于Vue實(shí)現(xiàn)拖拽功能

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)拖拽功能,拖動(dòng)方塊進(jìn)行移動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-04-04
  • vue滾動(dòng)插件better-scroll使用詳解

    vue滾動(dòng)插件better-scroll使用詳解

    這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)插件better-scroll,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • vue地址欄直接輸入路由無(wú)效問(wèn)題的解決

    vue地址欄直接輸入路由無(wú)效問(wèn)題的解決

    這篇文章主要介紹了vue地址欄直接輸入路由無(wú)效問(wèn)題的解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • vue?退出登錄?清除localStorage的問(wèn)題

    vue?退出登錄?清除localStorage的問(wèn)題

    這篇文章主要介紹了vue?退出登錄?清除localStorage的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue引用echarts超詳細(xì)步驟(附圖文)

    Vue引用echarts超詳細(xì)步驟(附圖文)

    這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下
    2023-08-08
  • Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式

    Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式

    這篇文章主要介紹了Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • 基于Vue2-Calendar改進(jìn)的日歷組件(含中文使用說(shuō)明)

    基于Vue2-Calendar改進(jìn)的日歷組件(含中文使用說(shuō)明)

    這篇文章主要介紹了基于Vue2-Calendar改進(jìn)的日歷組件(含中文使用說(shuō)明)的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-04-04
  • 新手簡(jiǎn)單了解vue

    新手簡(jiǎn)單了解vue

    Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面我們來(lái)簡(jiǎn)單了解下吧
    2019-05-05

最新評(píng)論