vue3 tree demo

github 地址 github.com/manongLY/tr…

目标：实现一个建议 tree 结构，点击按钮使节点的 count +1。

以下是实现的过程,使用的是 vite + vue3。

tree 组件

<template>
  <ul class="tree-body">                                    
    <li v-for="item in list" :id="item.id">
      <div>
        id:{{item.id}}
        count: {{item.clickCount}}
        <button @click="add(item)">+1</button>
      </div>      
      <tree :list="item.children"></tree> 
    </li>
  </ul>
</template>

<script setup>
defineProps({
  list: Array
})

function add(item){
  ++item.clickCount
}
</script>

<style>
.tree-body{
  margin: 10px 30px 0;
}
</style>

tree 组件的使用

<script setup>
import Tree from './components/Tree.vue'
import { ref} from "vue"
let nodeData = ref({
    id: 1,
    clickCount: 1,
    children:[
        {
            id: 2,
            clickCount: 2,
            children: [
                {
                    id: 3,
                    clickCount: 3,
                    children: []
                }
            ]
        },
        {
            id: 5,
            clickCount: 2,
            children: [
                {
                    id: 6,
                    clickCount: 3,
                    children: []
                }
            ]
        }
    ]
})
</script>

<template>
  <Tree :list="[nodeData]"></Tree>
</template>

<style>
#app {
  margin-top: 60px;
}
</style>