手写vue3 tree组件

最新推荐文章于 2024-04-22 19:26:15 发布

小努努努力

最新推荐文章于 2024-04-22 19:26:15 发布

阅读量261

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42200179/article/details/129193801

版权

父组件

<template>
    <div>

        <div>header</div>
        <div>left</div>
        <div>right</div>
        <TreeVue :data="data"></TreeVue>
    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref } from 'vue'
import TreeVue from './tree.vue'
interface Tree {
    name: string,
    checked: boolean,
    children?: Tree[]
}
const data = reactive<Tree[]>([
    {
        name: '1', checked: false, children: [{
            name: '1-1',
            checked: false,
        }]
    },
    { name: '2', checked: false, },
    {
        name: '3', checked: false, children: [{
            name: '3-1',
            checked: false,
            children: [{
                name: '3-1-1',
                checked: false,
            }, {
                name: '3-1-1',
                checked: false,
            }]
        }]
    }
])
</script>
<style lang='less' scoped></style>


--------------------------------------
子组件


```javascript
<template>
    <div @click.stop="clickTap(item, $event)" class="tree" v-for="item in data">
        <input v-model="item.checked" type="checkbox"> <span>{{ item.name }}</span>
        <Tree v-if="item?.children?.length" :data="item?.children"></Tree>
    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref } from 'vue'
interface Tree {
    name: string,
    checked: boolean,
    children?: Tree[]
}
defineProps<{
    data?: Tree[]
}>()
const clickTap = (item: Tree, e: any) => {
    console.log(item)
    if (item.children) {
        item.children.forEach(element => {
            element.checked = item.checked
        });
    }
    console.log(e.target)
}
</script>
<style lang='less' scoped>
.tree {
    margin-left: 15px
}
</style>