vue elementUI tree樹(shù)形控件獲取父節(jié)點(diǎn)ID的實(shí)例
更新時(shí)間：2018年09月12日 10:18:30 作者：為什么名字都被占用
今天小編就為大家分享一篇vue elementUI tree樹(shù)形控件獲取父節(jié)點(diǎn)ID的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
首先找到element-ui.common.js文件 如下 具體看你工程下的node_modules
D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js
找到getCheckedNodes該方法 細(xì)節(jié)如下我的該方法在21618行
TreeStore.prototype.getCheckedNodes = function getCheckedNodes() {
var leafOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var checkedNodes = [];
var traverse = function traverse(node) {
var childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach(function (child) {
if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {
checkedNodes.push(child.data);
}
traverse(child);
});
};
traverse(this);
return checkedNodes;
};
修改 其中的if判斷
TreeStore.prototype.getCheckedNodes = function getCheckedNodes() {
var leafOnly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var checkedNodes = [];
var traverse = function traverse(node) {
var childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach(function (child) {
if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
checkedNodes.push(child.data);
}
traverse(child);
});
};
traverse(this);
return checkedNodes;
};
然后重啟項(xiàng)目
console.log(this.$refs.tree.getCheckedKeys());就可以拿到父節(jié)點(diǎn)的ID啦
以上這篇vue elementUI tree樹(shù)形控件獲取父節(jié)點(diǎn)ID的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue綁定數(shù)字類型 value為數(shù)字的實(shí)例
這篇文章主要介紹了vue綁定數(shù)字類型 value為數(shù)字的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue如何解決axios請(qǐng)求前端跨域問(wèn)題
vue項(xiàng)目中,前端使用axios與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候,如果后臺(tái)沒(méi)有設(shè)置跨域,瀏覽器做數(shù)據(jù)請(qǐng)求的時(shí)候就會(huì)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請(qǐng)求前端跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法的相關(guān)資料,文中介紹的是后端接口導(dǎo)出、前端直接做導(dǎo)出,通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-05-05
Vuex 的 store 接受 plugins 選項(xiàng)，這個(gè)選項(xiàng)暴露出每次 mutation 的鉤子。Vuex 插件就是一個(gè)函數(shù)，這篇文章主要介紹了vuex 中插件的編寫案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
這篇文章主要是來(lái)和大家一起討論一下Vue2與Vue3中響應(yīng)式的原理，文中的相關(guān)示例代碼簡(jiǎn)潔易懂，對(duì)我們深入了解Vue有一定的幫助，需要的可以參考下2023-07-07
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁(yè)面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動(dòng) tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說(shuō)可以用 vue-draggable-plus 這個(gè)庫(kù)來(lái)實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01
總結(jié)Vue Element UI使用中遇到的問(wèn)題
這篇文章主要介紹了Vue Element UI使用中遇到的問(wèn)題，對(duì)ElementUI感興趣的同學(xué)，可以參考下2021-05-05
前端插件庫(kù)之vue3使用vue-codemirror插件的步驟和實(shí)例
CodeMirror是一款基于JavaScript、面向語(yǔ)言的前端代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于前端插件庫(kù)之vue3使用vue-codemirror插件的步驟和實(shí)例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
從零開(kāi)始實(shí)現(xiàn)Vue簡(jiǎn)單的Toast插件
這篇文章主要給大家介紹了如何從零開(kāi)始實(shí)現(xiàn)Vue簡(jiǎn)單的Toast插件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01