vue创建树形结构

最新推荐文章于 2024-09-05 13:17:35 发布

七彩冰淇淋与藕汤

最新推荐文章于 2024-09-05 13:17:35 发布

阅读量1.6k

点赞数

文章标签： vue递归建树

本文链接：https://blog.csdn.net/qq_36582776/article/details/124245888

版权

本文介绍了Vue中父子组件的数据传递，通过父组件将数据传给子组件并展示层级结构，以及子组件如何通过递归调用来实现多层数据的渲染。同时展示了在子组件内部如何通过构建字符串并使用`v-html`插入到模板中呈现树形结构数据的方法。

摘要由CSDN通过智能技术生成

1.数据在父组件中：父组件传值+子组件自调用

父：

<template>
  <div class="hello">
    <comp1 :treeList="tryData"></comp1>//给子组件传值
  </div>
</template>

<script>
import comp1 from './comp1/index.vue'
export default {
  name: 'HelloWorld',
  components:{comp1},
  data () {
    return {
      tryData: [
        { id: 0, show: true, children: [{ id: 1 }, { id: 4 }] },
        { id: 2, show: false, children: [{ id: 5 }] },
        {
          id: 3,
          show: true,
          children: [
            { id: 6 },
            { id: 7 },
            { id: 8, show: false, children: [{ id: 9 }, { id: 10 }] },
          ],
        },
      ],
    }
  }
}
</script>

子：

<template>
  <div>
    <ul v-if="treeList">
      <li v-for="it in treeList" :key="it.id">//展示一层结构
        {{ it.id }}
        //在li里通过自调用展示多层结构
        <comp1 v-if="it.children" :treeList="it.children"></comp1>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "comp1",
  props:['treeList']//别忘了加引号
};
</script>

2.数据在子组件里：递归创建节点字符串，v-html将其插入到template中

<template>
  <div v-html="str"></div>
</template>
<script>
export default {
  name: "comp1",
  data() {
    return {
      tryData: [
        { id: 0, show: true, children: [{ id: 1 }, { id: 4 }] },
        { id: 2, show: false, children: [{ id: 5 }] },
        {
          id: 3,
          show: true,
          children: [
            { id: 6 },
            { id: 7 },
            { id: 8, show: false, children: [{ id: 9 }, { id: 10 }] },
          ],
        },
      ],
      str: "",
    };
  },
  methods: {
    build(arr) {
      if (arr.length == 0) return;
      this.str = this.str.concat(`<ul>`);
      console.log(arr[0])
      for (let i=0;i<arr.length;i++) {
        console.log(i)
        this.str = this.str.concat(`<li>`);
        this.str = this.str.concat(`${arr[i].id}`);
        if (arr[i].children) this.build(arr[i].children);
        this.str = this.str.concat(`</li>`);
      }
      this.str = this.str.concat(`</ul>`);
    },
  },
  mounted() {
    this.build(this.tryData);
  },
};
</script>

结果展示：