JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-tree
ref="tree"
:expand-on-click-node="false"
:props="props1"
:load="loadNode1"
lazy="" show-checkbox>
</el-tree>
<el-button @click="showNodeInfo">Show current node</el-button>
<el-button @click="appendNode">Appent node to current</el-button>
<div style="width:50%; display:inline-block;">
<textarea style="height:300px; width:100%;">
{{data4}}
</textarea>
</div>
</div>
Babel + JSX
var Main = {
data() {
return {
props1: {
label: 'name',
isLeaf: 'leaf'
},
idx: 0,
data4: ''
};
},
methods: {
showNodeInfo() {
const node = this.$refs.tree.store.getCurrentNode()
if (node) {
console.log(node)
let lenN = (node.childNodes) ? node.childNodes.length : 0
let data = (node.data) ? node.data : null
this.data4 = {
node: {
IsLeaf: node.isLeaf,
loaded: node.loaded,
nodeChildren: lenN,
},
'node.data': data
}
} else {
this.data4 = 'No node selected!'
}
},
appendNode() {
const parent = this.$refs.tree.store.getCurrentNode()
if (parent) {
++this.idx
let name = 'new' + this.idx
this.$refs.tree.append({ name: name, leaf: true }, parent )
}
},
loadNode1(node, resolve) {
console.log(node);
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')