Vue 递归组件属性组件无限级

最新推荐文章于 2024-11-22 10:49:36 发布

原创最新推荐文章于 2024-11-22 10:49:36 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue递归 #vue树形控件

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了一种自定义树形组件的实现方法，通过Vue框架展示了如何构建一个多级树形结构，包括数据绑定、递归渲染及节点展开/折叠交互效果。此组件适用于展示复杂的层级数据结构。

效果：

父组件：

<template>
  <div class="custom">
    <Ptree :treeListData="treeData"></Ptree>
  </div>
</template>
<script>
import Ptree from '@/components/Ptree'
export default {
  data () {
    return {
      treeData: [
        {
          isOpen: false,
          label: '一级01',
          value: '1',
          children: [
            {
              isOpen: false,
              label: '二级01',
              value: '1-1',
              children: [
                {
                  isOpen: false,
                  label: '三级',
                  value: '1-1-1',
                  children: [
                    {
                      isOpen: false,
                      label: '四级',
                      value: '1-1-1-1',
                      children: [
                        {
                          isOpen: false,
                          label: '五级',
                          value: '1-1-1-1-1',
                          children: [
                            {
                              isOpen: false,
                              label: '六级',
                              value: '1-1-1-1-1'
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              isOpen: false,
              label: '二级02',
              value: '1-1',
              children: [
                {
                  isOpen: false,
                  label: '三级',
                  value: '1-1-1',
                  children: []
                }
              ]
            }
          ]
        },
        {
          isOpen: false,
          label: '一级02',
          value: '1',
          children: [
            {
              isOpen: false,
              label: '二级01',
              value: '1-1',
              children: []
            },
            {
              isOpen: false,
              label: '二级02',
              value: '1-1',
              children: [
                {
                  isOpen: false,
                  label: '三级',
                  value: '1-1-1',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  },
  components: {
    Ptree
  }
}
</script>

子组件：

<template>
  <div>
    <ul class="tree">
      <li v-for="(item, index) in treeListData" :key="index" :class="[item.isOpen ? 'open' : 'close', item.children && item.children.length ? '' : 'no-children']"><span @click="treeItem(item)">{{item.label}}</span>
        <Ptree v-show="item.isOpen" :treeListData="item.children"></Ptree>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Ptree',
  props: [ 'treeListData' ],
  methods: {
    treeItem (item) {
      item.isOpen = !item.isOpen
    }
  }
}
</script>

<style lang="scss" scoped>
.tree{
  li{line-height:30px;padding-left:30px;position: relative;font-size:14px;
    &::after{display:block;clear: both;content: '';width:6px;height:6px;border-top:1px solid #f00;border-right:1px solid #f00;position:absolute;left:14px;top:12px;}
    &.open::after{transform: rotate(135deg)}
    &.close::after{transform: rotate(45deg)}
    &.no-children::after{display:none}
  }
}
</style>