vue?目錄樹的展開(kāi)與關(guān)閉的實(shí)現(xiàn)
本文主要介紹了 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ù)字輸入組件的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng)
這篇文章主要為大家詳細(xì)介紹了vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07vue滾動(dòng)插件better-scroll使用詳解
這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)插件better-scroll,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10vue?退出登錄?清除localStorage的問(wèn)題
這篇文章主要介紹了vue?退出登錄?清除localStorage的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12Vue.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ō)明)的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04