- 一开始的想法是从源码入手；但细看了下tree api，其实用下递归就可以解决问题；废话不多话，直接上代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-tree :data="data" show-checkbox node-key="id" :check-strictly="true" @check-change="changeEvent" ref="tree">
</el-tree>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
data: [{
id: 1,
label: '一级 2',
children: [{
id: 3,
label: '二级 2-1',
children: [{
id: 4,
label: '三级 3-1-1'
}, {
id: 5,
label: '三级 3-1-2',
}]
}, {
id: 2,
label: '二级 2-2',
children: [{
id: 6,
label: '三级 3-2-1'
}, {
id: 7,
label: '三级 3-2-2',
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
changeEvent(data, sel) {
if (sel) {
traverseTree(data).forEach((item)=>{
this.$refs.tree.setChecked(item,true)
})
}else{
traverseTree(data).forEach((item)=>{
this.$refs.tree.setChecked(item,false)
})
}
function traverseTree(node) {
var child = node.children,
arr = [];
arr.push(node.id);
if (child) {
child.forEach(function (node) {
arr = arr.concat(traverseTree(node));
});
}
return arr;
}
}
}
})
</script>
</html>
关键代码在于设置:check-strictly="true" 和@check-change="changeEvent"，以及递归函数
网友评论