vue实现节点增删改功能

站长资源 2024/12/27 佚名

5 1538 5

铁雪资源网 Design By www.gsvan.com

本文实例为大家分享了vue实现节点增删改功能的具体代码，供大家参考，具体内容如下

效果：

增删改功能 tree.vue组件代码：

<template>
 <div>
  <div class="all-div" v-if="model.name">
   <div class="itemRow" :style="{ marginLeft:model.level*20+'px' }">
    <span v-show="model.children.length" @click="expandOrCollapse">
     <img v-if="model.isOpen" src="/UploadFiles/2021-04-02/login_logo.png">

父组件中引用代码：


<template>
 <div id="all">
  <tree :model="root" :length="length"></tree>
 </div>
</template>
<style scoped>
 #all{
  width:100%;
  height: 100%;
 }
 
</style>
<script>
 import tree from './tree.vue'
 export default{
  data(){
   return{
    root:{
     name:"根节点",
     level:0,
     isOpen:true,
     children:[
      {
       name:"节点1",
       level:1,
       url:"/homePage/middle/navLeftFirst",
       isOpen:false,
       children:[
        {
         name:"节点1-1",
         level:2,
         isOpen:true,
         children:[]
        },
        {
         name:"节点1-2",
         level:2,
         isOpen:true,
         children:[]
        }
       ]
      },
      {
       name:"节点2",
       level:1,
       url:"/homePage/middle/navLeftSecond",
       isOpen:false,
       children:[
        {
         name:"节点2-1",
         level:2,
         isOpen:true,
         children:[]
        },
        {
         name:"节点2-2",
         level:2,
         isOpen:true,
         children:[]
        }
       ]
 
      }
     ]
    },
    length:2
   }
  },
  components:{
   tree
  }
 }
</script> 


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue节点增删改,vue节点增删,vue节点删改