element-plus 树形控件用法

element-plus 树形控件是一种常用的可视化组件，可以展示树型结构的数据。以下是 element-plus 树形控件的用法。

首先，需要在代码中导入 element-plus 的 Tree 组件：

import { Tree } from 'element-plus';

然后，在 HTML 中使用 Tree 组件：

在以上代码中，: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 组件的其他属性进行设置，例如设置节点可选中：

在以上代码中，show-checkbox 属性表示节点前显示复选框，@check-change 事件表示复选框选中状态变化时的回调函数，可以在回调函数中获取选中的节点。