<div id="app" v-cloak>
<el-tree
:data="rootData"
ref="rootTree"
show-checkbox
node-key="value"
default-expand-all>
</el-tree>
<button @click="getKeys">獲取選中節點Key</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello',
rootData: [
{"value":16,"label":"首頁","parent":-1},
{"value":17,"label":"用戶列表","parent":-1},
{"value":18,"label":"信息列表","parent":18},
{"value":19,"label":"信息管理","parent":-1,
"children":[
{"value":20,"label":"個人信息","parent":19},
{"value":21,"label":"修改信息","parent":19}
]
},
{"value":22,"label":"資金數據","parent":-1,
"children":[
{"value":23,"label":"投資分佈","parent":22},
{"value":24,"label":"項目分佈","parent":22},
{"value":25,"label":"收支統計","parent":22}
]
},
{"value":26,"label":"系統管理","parent":26,
"children":[
{"value":27,"label":"機構管理","parent":26},
{"value":28,"label":"角色管理","parent":26},
{"value":29,"label":"崗位管理","parent":26},
{"value":30,"label":"用戶管理","parent":26},
{"value":31,"label":"系統菜單","parent":26}
]
},
{"value":32,"label":"車輛管理","parent":-1,
"children":[
{"value":33,"label":"車輛信息","parent":32}
]
}
]
},
methods: {
getKeys () {
var aKey = this.getCheckedKeys(this.rootData, this.$refs.rootTree.getCheckedKeys(), 'value');
console.log(aKey);
},
getCheckedKeys (data, keys, key) {
var res = [];
recursion(data, false);
return res;
function recursion (arr, isChild) {
var aCheck = [];
for ( var i = 0; i < arr.length; i++ ) {
var obj = arr[i];
aCheck[i] = false;
if ( obj.children ) {
aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
if ( aCheck[i] ) {
res.push(obj[key]);
}
}
for ( var j = 0; j < keys.length; j++ ) {
if ( obj[key] == keys[j] ) {
aCheck[i] = true;
if ( res.indexOf(obj[key]) == -1 ) {
res.push(obj[key]);
}
break;
}
}
}
if ( isChild ) {
return aCheck.indexOf(true) != -1;
}
}
}
}
})
</script>
el-tree獲取節點
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.