<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<el-tree :data="data2" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps">
</el-tree>
<div class="buttons">
<el-button @click="getCheckedNodes">通過 node 獲取</el-button>
<el-button @click="getCheckedKeys">通過 key 獲取</el-button>
<el-button @click="setCheckedNodes">通過 node 設置</el-button>
<el-button @click="setCheckedKeys">通過 key 設置</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
methods: {
getCheckedNodes() {
/*返回的是選中的數據組成的數組*/
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
/*返回選中的id組成的數組*/
console.log(this.$refs.tree.getCheckedKeys());
},
/*通過getCheckedNodes()設置選中項*/
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([{
id: 5,
label: '二級 2-1'
}, {
id: 9,
label: '三級 1-1-1'
}]);
},
/*通過setCheckedKeys()設置選中項*/
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
data() {
return {
data2: [{
id: 1,
label: '一級 1',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1'
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
});
</script>
</body>
</html>
