vue原生tree组件

Vue有一个原生的tree组件叫做`<el-tree>`，它是Element UI库中的一部分。它提供了非常方便的树形结构展示和交互功能。以下是一个简单的示例：

<template>
  <el-tree :data="data" :props="props"></el-tree>
</template>

<script>
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'
                }
              ]
            }
          ]
        }
      ],
      props: {
        label: 'label',
        children: 'children'
      }
    }
  }
}
</script>

在这个示例中，我们使用`<el-tree>`组件来渲染一个简单的树形结构。`data`属性指定了树的数据，`props`属性指定了节点的属性名称（如`label`和`children`）。您可以根据自己的需求更改这些属性。