VUE递归组件实现一个简单的树形结构

最新推荐文章于 2024-07-25 09:37:37 发布

沐离歌

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量4k

点赞数 1

分类专栏： js 文章标签： vue 树形组件

本文链接：https://blog.csdn.net/mulige/article/details/88227312

版权

本文展示了如何使用Vue创建一个简单的递归组件来实现树形结构。组件功能包括：显示子级提示、控制展开按钮状态、文字选中颜色变化及点击返回当前选中内容。文章提供父组件和子组件的代码示例，适合根据项目需求进行定制。

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

关于什么情况下使用以及里面使用的部分原理在本文就不做说明了，现在介绍的只是简单的一种实现的方式；

先看下实现的效果：

tree

简单介绍下这个组件的功能：

1. 显示是否存在下级菜单的左侧按钮提示

2. 展开的时候的左侧按钮的展示状态的改变

3. 选中的时候文字的颜色的变化

4. 点击文字选中的时候会返回当前的这个位置的内容（可根据自己需求进行修改）

先看下父组件的代码：

<template>
    <div class="treeIndex">
        <tree-item :listArr="list" :chooseItem="chooseItem">

        </tree-item>
    </div>
</template>

<script>
    import  {eventBus} from "../../eventBus";
    import treeItem from './treeItem'
    export default {
        name: "treeIndex",
        components: {treeItem},
        data() {
            return {
                list: [
                    {
                        name: 'name1',
                        children: [
                            {
                                name: 'name1-1',
                                children: [
                                    {
                                        name: '1-1-1'
                                    },
                                    {