快捷導(dǎo)航

el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)

更新時間：2023年10月17日 16:05:54 作者：weixin_43939111

本文主要介紹了el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、前提

官網(wǎng)上有兩種辦法：
根據(jù) data 或者 key 拿到 Tree 組件中的 node (data) 要獲得 node 的 key 或者 data。
我這key設(shè)置后沒有生效，采用的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',
          }]
        }]
	}
}

二、實(shí)現(xiàn)

handleNodeClick(node){
	console.log(node)//node為點(diǎn)擊節(jié)點(diǎn)綁定的**數(shù)據(jù)**
	let pNode = this.$refs.tree.getNode(node).parent.data;
	console.log(pNode)//獲得點(diǎn)擊節(jié)點(diǎn)父節(jié)點(diǎn)的**數(shù)據(jù)**
}

el-tree提供的回調(diào)事件：@node-click=“handleNodeClick”。（方法名自取，這里用的原來的“handleNodeClick”）

其他：①通過打印getNode結(jié)果，發(fā)現(xiàn)當(dāng)前點(diǎn)擊節(jié)點(diǎn)的值不是直接顯示在結(jié)構(gòu)中，而是用data又包裹了一層，data內(nèi)部才是當(dāng)前點(diǎn)擊節(jié)點(diǎn)的具體數(shù)據(jù)。
②打印出的getNode結(jié)果，里面有一個parent屬性，同樣parent內(nèi)的data才是父節(jié)點(diǎn)的數(shù)據(jù)
③對于一層結(jié)構(gòu)中的id值，和我綁的node-key對應(yīng)不上，只有如上述兩個data中的id才是我正確需要的

附：getNode調(diào)用后打印的結(jié)構(gòu)示例：

到此這篇關(guān)于el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)el-tree獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解Vue打包優(yōu)化之code spliting
這篇文章主要介紹了詳解Vue打包優(yōu)化之code spliting，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-10-10
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
vuedraggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue給對象動態(tài)添加屬性和值的實(shí)例
今天小編就為大家分享一篇vue給對象動態(tài)添加屬性和值的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
利用vue3仿蘋果系統(tǒng)側(cè)邊消息提示效果實(shí)例
這篇文章主要給大家介紹了關(guān)于如何利用vue3仿蘋果系統(tǒng)側(cè)邊消息提示效果的相關(guān)資料,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2021-12-12
分析Vue指令實(shí)現(xiàn)原理
自定義指令是vue中使用頻率僅次于組件，其包含bind、inserted、update、componentUpdated、unbind五個生命周期鉤子。本文將對vue指令的工作原理進(jìn)行相應(yīng)介紹
2021-06-06
Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼
某些應(yīng)用場景會給點(diǎn)擊事件添加權(quán)限，不存在權(quán)限就攔截點(diǎn)擊事件，有權(quán)限就繼續(xù)正常觸發(fā)點(diǎn)擊事件。這樣的效果是如何實(shí)現(xiàn)的呢，本文就來和大家詳細(xì)講講
2023-02-02
Vue Router 路由匹配語法示例詳解
文章詳細(xì)介紹了Vue Router中的路由匹配語法,包括動態(tài)參數(shù)、正則約束、可重復(fù)參數(shù)、可選參數(shù)以及敏感與嚴(yán)格選項(xiàng),這些高級特性使得URL設(shè)計更加靈活和精確,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2025-10-10
el-date-picker日期時間選擇器的選擇時間限制到分鐘級別
文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時間,禁止選擇當(dāng)前時間的日期及時分,同時允許選擇其他日期的全天時分,通過設(shè)置 `pickerOptions` 對象的屬性,可以實(shí)現(xiàn)對日期和時間的精確控制,感興趣的朋友跟隨小編一起看看吧
2025-01-01