vue树形控件【页面渲染】

在Vue中渲染树形控件的常见方法是使用递归组件。递归组件基于组件自身调用自身的方式来构建树形结构。

以下是一个简单的树形结构的组件示例：

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      {{ node.label }}
      <tree :nodes="node.children" v-if="node.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "tree",
  props: {
    nodes: {
      type: Array,
      required: true,
    },
  },
};
</script>

该组件将一个节点数组作为prop，然后遍历每个节点并将其渲染为列表项。如果一个节点有子节点，那么递归地呈现子节点。

以下是一个使用该组件的示例：

<template>
  <div>
    <h2>树形结构</h2>
    <tree :nodes="nodes" />
  </div>
</template>

<script>
import Tree from "@/components/Tree.vue";

export default {
  components: {
    Tree,
  },
  data() {
    return {
      nodes: [
        {
          id: 1,
          label: "节点1",
          children: [
            {
              id: 2,
              label: "节点1-1",
              children: [
                {
                  id: 3,
                  label: "节点1-1-1",
                },
                {
                  id: 4,
                  label: "节点1-1-2",
                },
              ],
            },
            {
              id: 5,
              label: "节点1-2",
            },
          ],
        },
        {
          id: 6,
          label: "节点2",
          children: [
            {
              id: 7,
              label: "节点2-1",
            },
            {
              id: 8,
              label: "节点2-2",
              children: [
                {
                  id: 9,
                  label: "节点2-2-1",
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

在这个示例中，我们创建了一个树形结构数据，并将其传递到Tree组件中，然后Tree组件会自动递归地呈现整个树形结构。

当然，您也可以使用其他树形控件库，例如Vue-Tree，Element-UI Tree等。这些库都有自己的组件，您可以按照它们的文档来使用。

若是使用的组件，一定要记着，

没有这一步，你得到的很可能会是一片只占有位置却没有数据的空白！！！