<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-tree v-loading="loading" style="width: 400px;"
ref="tree"
:props="defaultProps"
:load="loadNode"
:data="items"
node-key="id"
:expand-on-click-node="false"
lazy
:check-strictly="true"
@check-change="checkChange"
show-checkbox>
</el-tree>
</div>
</body>
<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',
data() {
return {
defaultProps: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
items: [],
loading: true,
selecte: {},
count: 1,
}
},
created:function(){
// 一开始模拟获取数据，使v-loading=true,获取数据之后再把v-loading复制为false
setTimeout(() => {
this.getChildren(0);
}, 2000);
},
methods: {
loadNode(node, resolve){
// 加载树节点
console.log(node);
if (node.level === 0) {
return resolve(this.items);
}
if (node.level >= 1) {
if(!node.data.leaf){
// 非叶子节点
this.getChildren(node.data.id, resolve);
}else{
return resolve([]);
}
}
},
getChildren(id, resolve){
// 根据获取孩子节点
let data;
// 模拟 Ajax 请求
if(id == 0){
respone = [{
name: 'region1',
id: 1,
leaf: false,
}, {
name: 'region2',
id: 2,
leaf: true,
}];
this.items = respone;
this.loading = false;
}else{
let hasChild = Math.random() > 0.5;
if (hasChild) {
data = [{
name: 'zone' + this.count++,
id: this.count+1
}, {
name: 'zone' + this.count++,
id: this.count+1
}];
} else {
data = [];
}
}
setTimeout(() => {
return resolve && resolve(data);
}, 500);
},
checkChange(data, checked, indeterminate) {
// 实现单选
console.log(data);
if(checked){
// 当前点击为选择状态而不是取消选择
this.selected = data;
}
// 获取当前所有被选中节点的id所组成的数组
let nodes = this.$refs.tree.getCheckedKeys();
if(nodes.length == 0 || nodes.length == 1) return;
// 注意传入的参数是数组
this.$refs.tree.setCheckedKeys([data.id]);
},
}
})
</script>
</html>
在线演示
在渲染 tree 的节点之前，需要先获取数据再填充到 tree 里面，这时候可以先对<el-tree>标签设置属性v-loading='true'，这样 tree 就会有一个加载的动态动画，直到获取到想要的数据之后便可以通过v-loading='false'取消加载动画，这时候 tree 的初始数据已经渲染完毕。
el-tree 标签的:load="loadNode"属性用于定义加载子树的方法 function(node, resolve)，结合 lazy 属性便可以实现懒加载来动态加载子树，注意 resolve() 函数接收一个数组对象作为参数来渲染 tree 的子树。
为el-tree 标签添加 show-checkbox属性可实现节点可选择，定义node-key属性来确定每个树节点的唯一标识，方便获取和选定制定的节点。
定义@check-change="checkChange"方法来处理实现单选的逻辑或者其他逻辑，这个节点选中状态发生变化时的回调函数共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点，使用this.$refs.tree.getCheckedKeys()返回目前被选中的节点所组成的数组，注意是返回的是 node-key 属性定义的唯一标识，所以需要先设置 node-key 属性，使用 this.$refs.tree.setCheckedKeys([data.id])设置目前勾选的节点，注意传入的参数是 node-key 属性定义的唯一标识所组成的数组。
为<el-tree>标签添加:expand-on-click-node="false"可实现只有点箭头图标的时候才会展开或者收缩节点。
为<el-tree>标签添加:check-strictly="true""可严格的遵循父子不互相关联的做法，这样点击子节点父节点就不会有相应的被选中状态，以及点击子节点时父节点不会触发 check-change函数。
为<el-tree>标签添加default-expand-all "true"可实现默认展开所有节点。