el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據
更新時間：2023年10月17日 16:05:54 作者：weixin_43939111
本文主要介紹了el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
一、前提
官網上有兩種辦法：
根據 data 或者 key 拿到 Tree 組件中的 node (data) 要獲得 node 的 key 或者 data。
我這key設置后沒有生效，采用的node獲取的方法
1、html部分
<el-tree
ref="tree"
:data="treeData"
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
>
</el-tree>
2、data舉例
data(){
return {
treeData:[{
id:'11',
label: '一級 1'
}, {
id:'22',
label: '一級 2',
children: [{
id:'221',
label: '二級 2-1',
}]
}]
}
}
二、實現(xiàn)
handleNodeClick(node){
console.log(node)//node為點擊節(jié)點綁定的**數(shù)據**
let pNode = this.$refs.tree.getNode(node).parent.data;
console.log(pNode)//獲得點擊節(jié)點父節(jié)點的**數(shù)據**
}
el-tree提供的回調事件：@node-click=“handleNodeClick”。（方法名自取，這里用的原來的“handleNodeClick”）
其他：①通過打印getNode結果，發(fā)現(xiàn)當前點擊節(jié)點的值不是直接顯示在結構中，而是用data又包裹了一層，data內部才是當前點擊節(jié)點的具體數(shù)據。
②打印出的getNode結果，里面有一個parent屬性，同樣parent內的data才是父節(jié)點的數(shù)據
③對于一層結構中的id值，和我綁的node-key對應不上，只有如上述兩個data中的id才是我正確需要的
附：getNode調用后打印的結構示例：
到此這篇關于el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據的文章就介紹到這了,更多相關el-tree獲取當前選中節(jié)點的父節(jié)點內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解Vue打包優(yōu)化之code spliting，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue 函數(shù)調用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細介紹了vuedraggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇vue給對象動態(tài)添加屬性和值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了關于如何利用vue3仿蘋果系統(tǒng)側邊消息提示效果的相關資料,文中通過實例代碼以及圖文介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2021-12-12
自定義指令是vue中使用頻率僅次于組件，其包含bind、inserted、update、componentUpdated、unbind五個生命周期鉤子。本文將對vue指令的工作原理進行相應介紹2021-06-06
某些應用場景會給點擊事件添加權限，不存在權限就攔截點擊事件，有權限就繼續(xù)正常觸發(fā)點擊事件。這樣的效果是如何實現(xiàn)的呢，本文就來和大家詳細講講2023-02-02
文章詳細介紹了Vue Router中的路由匹配語法,包括動態(tài)參數(shù)、正則約束、可重復參數(shù)、可選參數(shù)以及敏感與嚴格選項,這些高級特性使得URL設計更加靈活和精確,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-10-10
el-date-picker日期時間選擇器的選擇時間限制到分鐘級別
文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時間,禁止選擇當前時間的日期及時分,同時允許選擇其他日期的全天時分,通過設置 `pickerOptions` 對象的屬性,可以實現(xiàn)對日期和時間的精確控制,感興趣的朋友跟隨小編一起看看吧2025-01-01