欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Vue技術(shù)實現(xiàn)遞歸組件的方法

 更新時間:2021年08月20日 10:54:00   作者:Hizo  
這篇文章主要為大家詳細介紹了基于Vue技術(shù)實現(xiàn)遞歸組件的方法 ,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

描述

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

代碼實現(xiàn)

1、tree組件

在目錄下創(chuàng)建一個 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: {
        // 組件數(shù)據(jù)
        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>

效果圖

總結(jié)

該組件只實現(xiàn)了數(shù)據(jù)展示以及一些基本功能,肯定是不滿足一些項目上的實際需求,若要使用,還需自己在此基礎上去拓展完善。(例如使用該組件實現(xiàn)左側(cè)菜單,可以自己配置數(shù)據(jù),稍微修改下組件模板,實現(xiàn)點擊跳轉(zhuǎn))。

組件功能

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

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 解決echarts圖表使用v-show控制圖表顯示不全的問題

    解決echarts圖表使用v-show控制圖表顯示不全的問題

    這篇文章主要介紹了解決echarts圖表使用v-show控制圖表顯示不全的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue項目適配大屏端的方法示例

    vue項目適配大屏端的方法示例

    眾所周知在vue移動端h5頁面當中,適配是經(jīng)常會遇到的問題,這篇文章主要給大家介紹了關(guān)于vue項目適配大屏端的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • vuecli3打包后出現(xiàn)跨域問題,前端配置攔截器無效的解決

    vuecli3打包后出現(xiàn)跨域問題,前端配置攔截器無效的解決

    這篇文章主要介紹了vuecli3打包后出現(xiàn)跨域問題,前端配置攔截器無效的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue3 diff算法之雙端diff算法詳解

    Vue3 diff算法之雙端diff算法詳解

    雙端Diff在可以解決更多簡單Diff算法處理不了的場景,且比簡單Diff算法性能更好。本文將通過示例為大家詳細講講雙端diff算法的實現(xiàn)與使用,需要的可以參考一下
    2022-09-09
  • vue項目中vue.config.js文件詳解

    vue項目中vue.config.js文件詳解

    vue.config.js?是一個可選的配置文件,如果項目的?(和?package.json?同級的)?根目錄中存在這個文件,那么它會被?@vue/cli-service?自動加載,這篇文章主要介紹了vue項目中vue.config.js文件的介紹,需要的朋友可以參考下
    2024-02-02
  • vue組件中修改組件外元素樣式的兩種解決方案

    vue組件中修改組件外元素樣式的兩種解決方案

    這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問題,結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • ant-design-vue table分頁onShowSizeChange后的pageNo解決

    ant-design-vue table分頁onShowSizeChange后的pageNo解決

    這篇文章主要介紹了ant-design-vue table分頁onShowSizeChange后的pageNo的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • 詳解Vue的列表渲染

    詳解Vue的列表渲染

    這篇文章主要為大家介紹了Vue的列表渲染,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • vue如何禁止打開調(diào)試模式方法

    vue如何禁止打開調(diào)試模式方法

    這篇文章主要介紹了vue如何禁止打開調(diào)試模式方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • 利用vue寫todolist單頁應用

    利用vue寫todolist單頁應用

    有很多關(guān)于vue的todolist小程序,這篇文章主要介紹了 用vue寫todolist單頁應用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12

最新評論