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

vue用遞歸組件寫樹形控件的實例代碼

 更新時間：2018年07月19日 10:30:04   作者：前端林三哥  
最近在vue項目中遇到需要用樹形控件的部分，比如導航目錄是不確定的，所以必須要用樹形結(jié)構(gòu)，下面腳本之家小編給大家?guī)砹藇ue用遞歸組件寫樹形控件的實例代碼，需要的朋友參考下吧

最近在vue項目中遇到需要用樹形控件的部分，比如導航目錄是不確定的，所以必須要用樹形結(jié)構(gòu)，不管導航目錄有幾級，都可以自動顯示出來，我一開始覺得element-ui有樹形控件，不需要自己寫，調(diào)用就可以了，后來才發(fā)現(xiàn)，調(diào)用完事之后，樣式不可控，而且要加東西特別困難，無法滿足項目需求，于是，一首《涼涼》送給自己，后來去翻vue官網(wǎng)，發(fā)現(xiàn)居然有遞歸組件，一開始我寫了兩個組件，互相調(diào)用，可以寫出來，后來返現(xiàn)，如果項目要用到5棵樹，我要寫10個組件，而且樣式控制起來超級惡心，于是我就各種查資料，原生的也試過了，原生js寫的并不能在vue項目中使用，因為它用js創(chuàng)造的元素，違反了vue數(shù)據(jù)驅(qū)動視圖的原則，所以pass，又聽一遍《涼涼》，當然如果有小伙伴對原生js寫的樹形結(jié)構(gòu)感興趣我也可以貼出來，那么我們先來看看vue版的吧，后來，我就一直在默念“遞歸”這個詞，遞歸不就是自己調(diào)自己嗎，我可以只寫一個組件，來調(diào)用自己啊，也許應該可以，后來，經(jīng)過試驗終于成功了，下面我貼上代碼

vue版的樹形控件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>樹形結(jié)構(gòu)2</title>
</head>
<body>
  <div id = "app">
    <tree :folder = "trees" :select = "select"></tree>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('tree', {
      name:"tree",
      template:`<ul>
            <li v-for = "item in folder">
              <span @click = "select(item)">{{ item.label }}</span>
              <tree v-if = "item.children" :folder = "item.children" :select = "select"></tree>
            </li>
          </ul>`,
      props:["folder","select"],
    })
    // <tree v-if = "item.children" :folder = "item.children"></tree>
    var app = new Vue({
      el:"#app",
      data:{
        msg:"hello world",
        trees: [
          {
            id:1,
            label:"1級目錄1",
            show:false,
            children:[
              {
                id:"1-1",
                label:"1.1目錄"
              },
              {
                id:"1-2",
                label:"1.2目錄"
              },
              {
                id:"1-3",
                label:"1.3目錄"
              },
            ]
          },
          {
            id:2,
            label:"1級目錄2",
            show:false
          },
          {
            id:3,
            label:"1級目錄3",
            show:false,
            children:[
              {
                id:"3-1",
                label:"3.1目錄"
              },
              {
                id:"3-2",
                label:"3.2目錄",
                show:false,
                children:[
                  {
                    id:"3-2-1",
                    label:"3.2.1目錄"
                  },
                  {
                    id:"3-2-2",
                    label:"3.2.2目錄"
                  },
                  {
                    id:"3-2-3",
                    label:"3.2.3目錄"
                  }
                ]
              }
            ]
          },
          {
            id:4,
            label:"1級目錄4",
            show:false,
            children:[
              {
                id:"4-1",
                label:"4.1目錄"
              },
              {
                id:"4-2",
                label:"4.2目錄",
                show:false,
                children:[
                  {
                    id:"4-2-1",
                    label:"4.2.1目錄"
                  }
                ]
              }
            ]
          },
          {
            id:5,
            label:"1級目錄5",
            show:false,
            children:[
              {
                id:"5-1",
                label:"5.1目錄",
                show:false,
                children:[
                  {
                    id:"5-1-1",
                    label:"5.1.1目錄"
                  },
                  {
                    id:"5-1-2",
                    label:"5.1.2目錄",
                    show:false,
                    children:[
                      {
                        id:"5-1-2-1",
                        label:"5.1.2.1目錄"
                      },
                    ]
                  }
                ]
              },
              {
                id:"5-2",
                label:"5.2目錄",
                show:false
              }
            ]
          },
        ]
      },
      methods:{
        clickHandler(){
          console.log(23333);
        },
        select(data){
          console.log(data);
        }
      },
      mounted(){
        console.log(this.trees);
      }
    })
  </script>
</body>
</html>

看下結(jié)果

這里寫圖片描述

當然我用的全局組件，如果用vue-cli搭建的環(huán)境是一樣的，引入組件就可以了，但是一定要注意，組件內(nèi)必須要用name屬性，而且name的名稱要和組件名稱（組件標簽名稱）一致才可以

貼一個項目中用的模板吧，相當于做筆記了

<template>
  <ul class = "dataBaseTree">
    <li v-for = "(item,index) in folder" :key = "index">
      <span @click = "select(item)" :class = "{'active':currentId == item.id}">
        <i class = "folderIcon" v-if = "item.children">
          <icon :icon = "'xiala'" v-if = "item.show"></icon>
          <icon :icon = "'xiala2'" v-else></icon>
        </i>
        {{ item.label }}
      </span>
      <el-collapse-transition>
        <DatabaseTree v-if = "item.children && item.show" :folder = "item.children" :select = "select" :currentId = "currentId"></DatabaseTree>
      </el-collapse-transition>
    </li>
  </ul>
</template>

<script>
  import { mapGetters , mapActions} from 'vuex';
  export default{
    name:"DatabaseTree",
    props:["folder","select","currentId"],
    data(){
      return{
        addParams:{
          label:"",
          children:[]
        },
        noteData:{
          children:[]
        }
      }
    },
     computed:{
      ...mapGetters(["catalog"])
    },
    methods:{}
  }
</script>

<style lang="scss" scoped>
  .dataBaseTree{
    padding-left:12%;
    line-height:40px;
    ul{
      padding-left:12%;
      line-height:40px;
      li{
        span{
          display:inline-block;
          padding-left:23%;
          height:100%;
          width:120%;
          color:#ababab;
          font-size:14px;
          position: relative;
          cursor: pointer;
          &:hover{
            background: #EDF0F5;
          }
          .folderIcon{
            color:#BCBCBC;
            position: absolute;
            top:-1px;
            left:22px;
          }
        }
      }
    }
    li{
      position: relative;
      span{
        display:inline-block;
        padding-left:40px;
        font-size:14px;
        height:100%;
        width:120%;
        cursor: pointer;
        position: relative;
        right:25px;
        top:-2px;
        color:#ababab;
        &:hover{
          background: #EDF0F5;
        }
        .titleIcon{
          color:#C3C3C3;
          font-size:16px;
          position: absolute;
          top:12px;
          left:16px;
        }
        .folderIcon{
          color:#BCBCBC;
          position: absolute;
          top:-1px;
          left:22px;
        }
      }
      .active{
        background: #EDF0F5;
      }
    }
  }
</style>

vue版的就到這里了

 下面貼一個原生js版的，感興趣的小伙伴可以繼續(xù)往下看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var tree=[
        {
          id:1,
          label:"1級目錄1",
          children:[
            {
              id:"1-1",
              label:"1.1目錄"
            },
            {
              id:"1-2",
              label:"1.2目錄"
            },
            {
              id:"1-3",
              label:"1.3目錄"
            },
          ]
        },
        {
          id:2,
          label:"1級目錄2",
        },
        {
          id:3,
          label:"1級目錄3",
          children:[
            {
              id:"3-1",
              label:"3.1目錄"
            },
            {
              id:"3-2",
              label:"3.2目錄",
              children:[
                {
                  id:"3-2-1",
                  label:"3.2.1目錄"
                },
                {
                  id:"3-2-2",
                  label:"3.2.2目錄"
                },
                {
                  id:"3-2-3",
                  label:"3.2.3目錄"
                }
              ]
            }
          ]
        },
        {
          id:4,
          label:"1級目錄4",
          children:[
            {
              id:"4-1",
              label:"4.1目錄"
            },
            {
              id:"4-2",
              label:"4.2目錄",
              children:[
                {
                  id:"4-2-1",
                  label:"4.2.1目錄"
                }
              ]
            }
          ]
        },
        {
          id:5,
          label:"1級目錄5",
          children:[
            {
              id:"5-1",
              label:"5.1目錄",
              children:[
                {
                  id:"5-1-1",
                  label:"5.1.1目錄"
                },
                {
                  id:"5-1-2",
                  label:"5.1.2目錄",

                  children:[
                    {
                      id:"5-1-2-1",
                      label:"5.1.2.1目錄"
                    },
                  ]
                }
              ]
            },
            {
              id:"5-2",
              label:"5.2目錄"
            }
          ]
        },
      ];
    var render = function(tree) {
      if (!tree) return null
      var ul = document.createElement('ul');
      for(var i = 0; i < tree.length;i++){
        var li = document.createElement('li')
        // 創(chuàng)建span標簽
        var span = document.createElement('span'); span.innerText = tree[i].label;
        li.appendChild(span);
        if(tree[i].children){
          var sub = render(tree[i].children);
          li.appendChild(sub);
        }
        ul.appendChild(li);
      }
      return ul
    };
    document.body.innerHTML = '';
    document.body.appendChild(render(tree)); 
  </script>
</body>
</html>

看下結(jié)果

這里寫圖片描述

總結(jié)

以上所述是小編給大家介紹的vue用遞歸組件寫樹形控件的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 原生echart和vue-echart的使用詳解

    原生echart和vue-echart的使用詳解

    這篇文章主要為大家詳細介紹了原生echart和vue-echart的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-02-02
  • vue分頁組件table-pagebar使用實例解析

    vue分頁組件table-pagebar使用實例解析

    這篇文章主要為大家詳細解析了vue分頁組件table-pagebar使用實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-08-08
  • vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)

    vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)

    防止數(shù)據(jù)被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密,這篇文章主要給大家介紹了關(guān)于vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • 詳解Vue中使用Echarts的兩種方式

    詳解Vue中使用Echarts的兩種方式

    這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-07-07
  • Vue3的vite中圖片動態(tài)加載3種方式

    Vue3的vite中圖片動態(tài)加載3種方式

    這篇文章主要給大家介紹了關(guān)于Vue3的vite中圖片動態(tài)加載3種方式的相關(guān)資料,圖片進入可視區(qū)域,進行動態(tài)加載圖片操作,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-11-11
  • VUE實現(xiàn)移動端列表篩選功能

    VUE實現(xiàn)移動端列表篩選功能

    這篇文章主要介紹了VUE實現(xiàn)移動端列表篩選功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能示例

    vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能示例

    這篇文章主要介紹了vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能,涉及基于vue的事件響應、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下
    2019-05-05
  • vue組件間的通信,子組件向父組件傳值的方式匯總

    vue組件間的通信,子組件向父組件傳值的方式匯總

    這篇文章主要介紹了vue組件間的通信,子組件向父組件傳值的方式匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • 詳解vue-class遷移vite的一次踩坑記錄

    詳解vue-class遷移vite的一次踩坑記錄

    本文主要介紹了vue-class遷移vite的一次踩坑記錄，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • vue發(fā)送websocket請求和http post請求的實例代碼

    vue發(fā)送websocket請求和http post請求的實例代碼

    這篇文章主要介紹了vue發(fā)送websocket請求和http post請求的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-07-07

最新評論