JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-button @click="getIndeterminate">获取</el-button>
<el-tree ref="tree" :data="regions" :props="props" :load="loadNode" lazy show-checkbox>
</el-tree>
</div>
SCSS
@import url("//unpkg.com/element-ui/lib/theme-default/index.css");
Babel + JSX
var Main = {
data() {
return {
regions: [{
'name': 'region1'
}, {
'name': 'region2'
}],
props: {
label: 'name',
children: 'zones'
},
count: 1
};
},
methods: {
getIndeterminate() {
let nodesDOM = this.$refs.tree.$el.querySelectorAll('.el-tree-node');
let nodesVue = [].map.call(nodesDOM, node => node.__vue__);
debugger;
console.log(nodesVue.filter(item => item.indeterminate === true));
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region1' }, { name: 'region2' }]);
}
if (node.level > 3) return resolve([]);
var hasChild;
if (node.data.name === 'region1') {
hasChild = true;
} else if (node.data.name === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [{
name: 'zone' + this.count++
}, {
name: 'zone' + this.count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')