Tree 树形控件---官方文档地址
用清晰的层级结构展示信息，可展开或折叠。
基础用法
基础的树形结构展示。
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> <script> export default { 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: { handleNodeClick(data) { console.log(data); } } }; </script>
可选择
适用于需要选择层级时使用。本例还展示了动态加载节点数据的方法。
<el-tree :props="props" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange"> </el-tree> <script> export default { data() { return { props: { label: 'name', children: 'zones' }, count: 1 }; }, methods: { handleCheckChange(data, checked, indeterminate) { console.log(data, checked, indeterminate); }, handleNodeClick(data) { console.log(data); }, 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); } } }; </script>
懒加载自定义叶子节点
由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
<el-tree :props="props1" :load="loadNode1" lazy show-checkbox> </el-tree> <script> export default { data() { return { props1: { label: 'name', children: 'zones', isLeaf: 'leaf' }, }; }, methods: { loadNode1(node, resolve) { if (node.level === 0) { return resolve([{ name: 'region' }]); } if (node.level > 1) return resolve([]); setTimeout(() => { const data = [{ name: 'leaf', leaf: true }, { name: 'zone' }]; resolve(data); }, 500); } } }; </script>
默认展开和默认选中
可将 Tree 的某些节点设置为默认展开或默认选中
分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
<el-tree :data="data2" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps"> </el-tree> <script> export default { 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>
禁用状态
可将 Tree 的某些节点设置为禁用状态
通过disabled设置禁用状态。
<el-tree :data="data3" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"> </el-tree> <script> export default { data() { return { data3: [{ id: 1, label: '一级 2', children: [{ id: 3, label: '二级 2-1', children: [{ id: 4, label: '三级 3-1-1' }, { id: 5, label: '三级 3-1-2', disabled: true }] }, { id: 2, label: '二级 2-2', disabled: true, children: [{ id: 6, label: '三级 3-2-1' }, { id: 7, label: '三级 3-2-2', disabled: true }] }] }], defaultProps: { children: 'children', label: 'label' } }; } }; </script>
树节点的选择
本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置node-key。