vue2树形简易控件

虽然官网给了树形控件怎么写,我相信大家也不一定能看懂,我想说树形控件的基本是需要递归相同的组件 而反复调用组件只需要组件的name值一样便可反复调用,闲话不说现在贴代码。

<template>

<gs :list="listdata" ></gs>

</template>

<script>

export default {

    data(){

      return{listdata:[{name:1,id:1,child:[{name:3,id:3,child:[]}]},{name:2,id:2,child:[]}]}

     },

    components:{

            gs:{

            name:gs,

            temlate:`<ul style="padding-left:1em">

                                <li v-for="li in list">{li.name}

                                <gs :list="li.child" ></gs>

                           </ul>`,

             props:['list']

              }

    }

}

以上基本的树形结构就出来了 因为都是组件组合组件的方式如果进行树形操作的话最好是用vuex来对节点进行记录并操作如果进行异步加载子节点数据的话也是可以进行的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,264评论 25 708
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 6,081评论 0 42
  • 他小时候也是留着很短的头发茬子,接近光头的形象。我对他的印象停留在他圆圆的脑袋上。那时的年纪,分别还不知深重,大家...
    亲爱的普朗阅读 261评论 0 0