vue自定义tree组件 vue递归实现自定义tree组件
Ace.九阶斗宗 人气:0想了解vue递归实现自定义tree组件的相关内容吗,Ace.九阶斗宗在本文为您仔细讲解vue自定义tree组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,tree组件,下面大家一起来学习吧。
1. 在tree/index.vue中:
<template> <div> <ul> <item :model='data'></item> </ul> </div> </template> <script> import Item from './item' export default { components:{ Item }, data(){ return{ data:{ title:"一级1", children:[ { title:"二级1-1", children:[ { title:"三级1-1-1", children:[ { title:"四级1-1-1-1", children:[ { title:"五级1-1-1-1-1" } ] } ] } ] },{ title:'二级1-2', children:[ { title:"三级1-2-1" } ] } ] } } } } </script>
2. item.vue组件:
<template> <li> <div @click="toggle"> {{model.title}} <span v-if="isFolder">[{{open?'-':'+'}}]</span> </div> <ul v-show="open" v-if="isFolder"> <item v-for="(child,index) in model.children" :model='child' :key='index'></item> </ul> </li> </template> <script> export default { name:'Item', props:{ model:{ type:Object, required:true } }, data(){ return{ open:false } }, computed:{ isFolder(){ return this.model.children && this.model.children.length>0 } }, methods:{ toggle(){ if(this.isFolder) this.open =!this.open } } } </script>
3. 在任意组件中使用:
<template> <div class="index"> <Tree></Tree> </div> </template> <script> import Tree from "@/components/tree" components:{ Tree } </script>
加载全部内容