element组件中el-tree树形控件的使用

我们在用element进行项目开发的时候，有时会要用到el-tree树形控件（比如我们对权限进行分配的时候），下面介绍关于el-tree常用的属性和方法

基础的树形控件结构

<el-tree :data="rightList" :props='treeProps' show-checkbox
node-key='id' default-expand-all :default-checked-keys='defkeys' ref='treeRef'>
</el-tree>

其中data为树形控件关联数据，props为相关配置选项，node-key为节点唯一标识

自定义节点的树形控件

<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false">
	<span class="custom-tree-node" slot-scope="{ node, data }">
		<span>{{ node.label }}</span>
		<span>
			<el-button
			type="text"
			size="mini"
			@click="() => append(data)">
			Append
			</el-button>
		</span>
	</span>
</el-tree>

使用 slot-scope 传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据

el-tree常用属性和方法

参数	说明	可选值
data	展示的数据
props	el-tree的配置选项
node-key	每个节点的唯一标识
empty-text	内容为空展示的文本
default-expand-all	默认展开所有节点
default-expanded-keys	默认展开节点的key数组
show-checkbox	节点是否可选
default-checked-keys	默认勾选的节点
icon-class	自定义节点数图标
lazy	是否懒加载子节点，与load同时使用
load	加载子树数据的方法，仅当 lazy 属性为true 时生效	function(node, resolve)
highlight-current	是否高亮选中节点
accordion	是否每回只打开一个同节点数展开
expand-on-click-node	点击节点时展开子节点树，而不是点击箭头才展开

props参数和方法

参数	说明	可选值
label	指定节点标签为节点对象的某个属性值
children	指定子树为节点对象的某个属性值

更多的方法可以参考官方文档