vue elementUI Tree 树形控件的使用方法

在Vue中使用Element UI的Tree组件可以创建一个树形控件，以下是一个简单的例子：

1. 首先确保你已经安装了Element UI并在你的项目中引入。
2. 在你的Vue组件中，你可以这样使用Tree组件：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    default-expand-all
    :props="defaultProps">
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        // 更多树节点...
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

在这个例子中，el-tree是Tree组件的标签，:data属性用于绑定树形控件的数据，node-key属性指定了每个树节点的唯一键值，default-expand-all属性设置为true表示默认展开所有节点，:props属性定义了子节点和标签显示的属性。

你可以根据实际的数据结构和需求来调整treeData和defaultProps中的属性名。Element UI的Tree组件还支持许多其他功能，如节点的选择、过滤、节点的拖拽等，使用时可以参考Element UI的官方文档。