el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據(jù)
更新時間：2023年10月17日 16:05:54 作者：weixin_43939111
本文主要介紹了el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
一、前提
官網(wǎng)上有兩種辦法：
根據(jù) 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ù)據(jù)**
let pNode = this.$refs.tree.getNode(node).parent.data;
console.log(pNode)//獲得點擊節(jié)點父節(jié)點的**數(shù)據(jù)**
}
el-tree提供的回調事件：@node-click=“handleNodeClick”。（方法名自取，這里用的原來的“handleNodeClick”）
其他：①通過打印getNode結果，發(fā)現(xiàn)當前點擊節(jié)點的值不是直接顯示在結構中，而是用data又包裹了一層，data內部才是當前點擊節(jié)點的具體數(shù)據(jù)。
②打印出的getNode結果，里面有一個parent屬性，同樣parent內的data才是父節(jié)點的數(shù)據(jù)
③對于一層結構中的id值，和我綁的node-key對應不上，只有如上述兩個data中的id才是我正確需要的
附：getNode調用后打印的結構示例：
到此這篇關于el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據(jù)的文章就介紹到這了,更多相關el-tree獲取當前選中節(jié)點的父節(jié)點內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue2.x數(shù)組劫持原理的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue修改swiper框架輪播圖小圓點的樣式不起作用的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中Quill富文本編輯器的使用教程，包括自定義工具欄、自定義字體選項、圖片拖拽上傳、圖片改變大小等使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡單且高效的方式來構建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來學習一下vue中父子組件雙向綁定的常用方法吧2023-10-10
這篇文章主要為大家詳細介紹了vue使用highcharts自定義儀表盤圖表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue-cli3訪問public文件夾靜態(tài)資源報錯的解決方式
這篇文章主要介紹了vue-cli3訪問public文件夾靜態(tài)資源報錯的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue中的驗證登錄狀態(tài)的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
在實際開發(fā)中我們會遇到不確定高度的情況,下面這篇文章主要給大家介紹了關于uniapp和vue如何獲取屏幕或盒子內容的寬高,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了vue?實現(xiàn)滑動塊解鎖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關資料,需要的朋友可以參考下2023-02-02