element-plus 树形控件是一种常用的可视化组件，可以展示树型结构的数据。以下是 element-plus 树形控件的用法。
首先，需要在代码中导入 element-plus 的 Tree 组件：
import { Tree } from 'element-plus';
然后，在 HTML 中使用 Tree 组件：
<template> <div> <el-tree :data="data" :props="defaultProps"></el-tree> </div> </template>
在以上代码中，:data 属性绑定了一个包含树形结构数据的对象，:props 属性绑定了树形结构的默认属性，可以根据具体需求进行修改。
接下来，需要在 Vue 实例中定义数据和属性：
export default { data() { return { data: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1' }, { label: '三级 1-1-2' } ] }, { label: '二级 1-2', children: [ { label: '三级 1-2-1' }, { label: '三级 1-2-2' } ] } ] }, { label: '一级 2', children: [ { label: '二级 2-1', children: [ { label: '三级 2-1-1' }, { label: '三级 2-1-2' } ] }, { label: '二级 2-2', children: [ { label: '三级 2-2-1' }, { label: '三级 2-2-2' } ] } ] } ], defaultProps: { children: 'children', label: 'label' } }; } };
在以上代码中，data 属性定义了树形结构的数据，defaultProps 属性定义了树形结构的默认属性，其中 children 表示节点的子节点，默认值为 children，label 表示节点的文本，默认值为 label。
最后，可以根据需要对 Tree 组件的其他属性进行设置，例如设置节点可选中：
<template> <div> <el-tree :data="data" :props="defaultProps" show-checkbox @check-change="handleCheckChange"></el-tree> </div> </template>
在以上代码中，show-checkbox 属性表示节点前显示复选框，@check-change 事件表示复选框选中状态变化时的回调函数，可以在回调函数中获取选中的节点。
