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">
<button @click='doSmt'>
Click
</button>
<label> {{ test }} </label>
<el-tree
:data="data2"
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
:default-expanded-keys="expandedKeys"
:expand-on-click-node="false"
>
</el-tree>
</div>
JavaScript
new Vue({
el: '#app',
data() {
return {
data2: [{
id: 1,
label: '1st 1',
children: [{
id: 4,
label: '2nd 1-1',
children: [{
id: 9,
label: '3rd 1-1-1'
}, {
id: 10,
label: '3rd 1-1-2'
}]
}]
}, {
id: 2,
label: '1st 2',
children: [{
id: 5,
label: '2nd 2-1'
}, {
id: 6,
label: '2nd 2-2'
}]
}, {
id: 3,
label: '1st 3',
children: [{
id: 7,
label: '2nd 3-1'
}, {
id: 8,
label: '2nd 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
selectedData: null,
selectedNode: null,
test: '',
expandedKeys: []
}
},
methods: {
handleNodeClick (data, node) {
this.selectedData = data
this.selectedNode = node
this.test = node.data.label
},
doSmt () {
/* this.selectedData.label = 'I click this node' */
var data = this.selectedData
/* const newChild = { id: 15, label: 'newNode', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild); */
/* try {
var node = this.selectedNode
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
this.test = 'Im here'
children.splice(index, 1);
}
catch (error) {
this.test = error.message
}...