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-button @click="expand">展开「一级 2」节点</el-button>
<el-button @click="collapse">收起「一级 2」节点</el-button>
<el-tree :data="data" :props="defaultProps" node-key="label" ref="tree"></el-tree>
</div>
Babel + JSX
var Main = {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
expand() {
this.$refs.tree.store.getNode('二级 1-1').expand();
},
collapse() {
this.$refs.tree.store.getNode('一级 2').collapse();
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')