快捷導(dǎo)航

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

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

本文主要介紹了el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(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: '一級(jí) 1'
        }, {
          id:'22',
          label: '一級(jí) 2',
          children: [{
          	id:'221',
            label: '二級(jí) 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”。（方法名自取，這里用的原來(lái)的“handleNodeClick”）

其他：①通過(guò)打印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é)果，里面有一個(gè)parent屬性，同樣parent內(nèi)的data才是父節(jié)點(diǎn)的數(shù)據(jù)
③對(duì)于一層結(jié)構(gòu)中的id值，和我綁的node-key對(duì)應(yīng)不上，只有如上述兩個(gè)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue2.x數(shù)組劫持原理的實(shí)現(xiàn)
這篇文章主要介紹了vue2.x數(shù)組劫持原理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用的解決
這篇文章主要介紹了vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中Quill富文本編輯器的使用教程
這篇文章主要介紹了Vue中Quill富文本編輯器的使用教程，包括自定義工具欄、自定義字體選項(xiàng)、圖片拖拽上傳、圖片改變大小等使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09
vue實(shí)現(xiàn)父子組件雙向綁定的方法總結(jié)
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡(jiǎn)單且高效的方式來(lái)構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來(lái)學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧
2023-10-10
vue使用highcharts自定義儀表盤圖表
這篇文章主要為大家詳細(xì)介紹了vue使用highcharts自定義儀表盤圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue-cli3訪問(wèn)public文件夾靜態(tài)資源報(bào)錯(cuò)的解決方式
這篇文章主要介紹了vue-cli3訪問(wèn)public文件夾靜態(tài)資源報(bào)錯(cuò)的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
uniapp和vue如何獲取屏幕或盒子內(nèi)容的寬高
在實(shí)際開發(fā)中我們會(huì)遇到不確定高度的情況,下面這篇文章主要給大家介紹了關(guān)于uniapp和vue如何獲取屏幕或盒子內(nèi)容的寬高,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
vue?實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解
這篇文章主要為大家介紹了vue?實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue.config.js中devServer.proxy配置說(shuō)明及配置正確不生效問(wèn)題解決
Vue項(xiàng)目devServer.proxy代理配置詳解的是一個(gè)非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中devServer.proxy配置說(shuō)明及配置正確不生效問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下
2023-02-02