el-tree渲染数据

el-tree是一个基于Element UI的树形组件，用于展示树形数据。在el-tree中，我们可以通过props属性来定义树形结构，并通过slot来定义每个节点的内容。以下是一个el-tree渲染数据的示例：

<template>
  <el-tree :data="treeData" :props="treeProps">
    <span slot-scope="{ node, data }">{{ data.label }}</span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1-1',
            },
            {
              id: 3,
              label: 'Node 1-2',
            },
          ],
        },
        {
          id: 4,
          label: 'Node 2',
          children: [
            {
              id: 5,
              label: 'Node 2-1',
            },
          ],
        },
      ],
      treeProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
};
</script>

在上面的示例中，我们定义了一个treeData数组来存储树形数据，其中每个节点都有一个label属性和一个children属性来表示它的子节点。我们还定义了一个treeProps对象，它告诉el-tree如何解析我们的数据结构。最后，我们使用一个slot来定义每个节点的内容，这里我们使用data.label来显示节点的label属性。通过这些配置，el-tree就可以正确地渲染我们的树形数据了。