基於Vue技術實現遞歸組件的方法

Posted on by

描述

本文介紹的是基於Vue技術實現遞歸組件的方法。用Vue實現一級列表、二級列表的展示很簡單，但是想要實現無限級，光是套上一個又一個的v-for是行不通的，這個時候就需要用到遞歸的方法，所謂遞歸，就是不斷調用自身，遞歸組件就是不斷調用自身組件來實現無限級列表展示。如下圖：

代碼實現

1、tree組件

在目錄下創建一個 tree.vue 的組件。

<!-- tree 樹形組件  -->
<template>
  <div class="container">
      <div v-for="item in treeData" :key="item">
        <div class="row" @click="extend(item)">
            <span
                ref="icon"
                class="icon-common"
                :class="{
                    'icon-down': item.children,
                    'icon-radio': !item.children,
                    'icon-rotate': item.isExtend
                }"
            ></span>
            <span class="title">{{ item.title }}</span>
        </div>
        <div v-if="isExtend(item)" class="children">
            <tree :tree-data="item.children" :is-extend-all="isExtendAll" />
        </div>
  </div>
  </div>
</template>

<script>
export default {
    props: {
        // 組件數據
        treeData: {
            type: Array,
            default: [],
        },
        // 是否默認展開全部
        isExtendAll: {
            type: Boolean,
            default: true,
        }
    },
    methods: {
        // 展開列表
        extend(item) {
            if (item.children) {
                item.isExtend = !item.isExtend;
            }
        },
        isExtend(item) {
            const isExtend = !item.isExtend && true;
            return this.isExtendAll ? isExtend : !isExtend;
        }
    }
}
</script>

<style scoped>
.container {
    font-size: 14px;
}
.row {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}
/* -----------  圖標樣式 START  ------------- */
.icon-common {
    display: inline-block;
    transition: all .3s;
}
.icon-down {
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top: 6px solid #000;
    border-bottom: none;
}
.icon-radio {
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
}
.icon-rotate {
    transform: rotate(-90deg);
}
/* -----------  圖標樣式 END  ------------- */
.title {
    margin-left: 10px;
}
.children {
    padding-left: 20px;
}
</style>

2、引用

在需要用到 tree 組件的地方引入該組件。

<template>
 <tree :tree-data="treeData" />
</template>

<script>
import Tree from './components/tree.vue';

export default {
 components: {
  Tree,
 },
 data() {
  return {
   treeData: [
    {
     title: '一級列表1',
     children: [
      {
       title: '二級列表1',
                            children: [
                                {
                                    title: '三級列表1',
                                }
                            ]
      },
      {
       title: '二級列表2',
      }
     ]
    },
    {
     title: '一級列表2',
     children: [
      {
       title: '二級列表1',
      },
      {
       title: '二級列表2',
      }
     ]
    },
    {
     title: '一級列表3',
     children: [
      {
       title: '三級列表1',
      },
      {
       title: '三級列表2',
      },
      {
       title: '三級列表3',
      }
     ]
    }
   ]
  }
 }
}
</script>

效果圖

總結

該組件隻實現瞭數據展示以及一些基本功能，肯定是不滿足一些項目上的實際需求，若要使用，還需自己在此基礎上去拓展完善。（例如使用該組件實現左側菜單，可以自己配置數據，稍微修改下組件模板，實現點擊跳轉）。

組件功能

  • 點擊展開和收起
  • 是否展開全部

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：