Vue封装树形菜单组件

csdn终于更新完成了哈，ok，步入正题

像这种树形结构的核心思想就是：递归思想，知道使用递归，其实这个例子函数的封装也就很简单喽

实现步骤：

设置的props：
data 数据结构默认为 []

定制模板:
不可定制

监控状态变化：
事件名on-select-change 点击树节点触发

使用：在需要的地方插入形如下面的代码，

 <m-tree :data="treeList"></m-tree>

你的数据结构应该是下面的类型：
               传入的数据结构：
                   [
                   {
                       title:XXX,
                       children:[
                           {
                               title:XXXX,
                               chidren:[]
                           }
                       ]
                   }]

如下示例：

    var data = [{title: "目录",chidren: [{title: "我的音乐",chidren: [{title: "周杰伦",chidren: [{title: "发如雪"}]}, {title: "王杰",chidren: [{title: "一场游戏一场梦"}]}]}, {title: "我的照片"}]}];

利用vue封装了一个树形菜单组件，效果图如下：

<!DOCTYPE html>
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style>ul {padding: 0;margin: 0;list-style: none;}.tree-menu {width: 360px;height: 100%;padding: 0px 12px;border-right: 1px solid #e6e9f0;}.tree-menu-comm span {display: block;font-size: 12px;position: relative;}.tree-contro .ico {background-position: 3px -92px;}.tree-title .ico {position: absolute;left: -13px;top: 0;width: 15px;height: 26px;background: url(./folder-tree.png) no-repeat 4px -43px;opacity: 0.8;}.tree-menu-comm span strong {display: block;width: 82%;position: relative;line-height: 22px;padding: 2px 0;padding-left: 5px;color: #161719;font-weight: normal;}.tree-nav {background: #e7f2fe;border: 1px solid #bfdaf4;padding-left: 14px;margin-left: 0px;}.tree-title {border: 1px solid #fff;margin-top: 1px;}/*无箭头*/.tree-contro-none .ico {background-position: -999px -99px;}/*箭头朝下*/.tree-contro .ico {background-position: 3px -92px;}</style><script src="../vue.js"></script><script></script>
</head><body>
<div id="app"><j-costum :data="treeList"></j-costum>
</div>
<script>var data = [{title: "目录",chidren: [{title: "我的音乐",chidren: [{title: "周杰伦",chidren: [{title: "发如雪"}]}, {title: "王杰",chidren: [{title: "一场游戏一场梦"}]}]}, {title: "我的照片"}]}];
Vue.component("j-tree-list",{computed:{count(){var c = this.increment;return ++c;},stylePadding(){return {'padding-left':this.count * 16 + 'px'}}},props:{data:{type:Array,default:[]},increment:{type:Number,default:0}},data:function(){return {fold:true}},template:`<ul><li v-for="item in data"><div class="tree-title" :style="stylePadding"><span><strong>{{item.title}}</strong><i class="ico"@click="foldFn(item)"></i></span></div><j-tree-list:increment="count"v-if="item.chidren"v-show="fold":data="item.chidren"></j-tree-list></li></ul>`,methods:{foldFn(item){this.fold = !this.fold;}}
})Vue.component("j-costum",{props:{data:{type:Array,default:[]}},template:`<div class="tree-menu-comm tree-menu"><j-tree-list :data="data"></j-tree-list></div>`})var vm = new Vue({el:"#app",data:{treeList:data}});</script>
</body></html>

Vue封装树形菜单组件相关推荐

Vue.js--下拉菜单组件
效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head><meta ...
vue封装一个日历组件
图示封装的组件的代码如下 <template><div class="calendar"><div c ...
vue封装自己的组件库 02.封装dialog组件
link: https://blog.csdn.net/weixiaowei_2016/article/details/104702793 四.封装一个element-ui风格的dialog组件前置 ...
vue 封装返回顶部组件
我的环境是vue+vant+ts, 相信大家应该知道怎么改成vue+js的写法先看效果图: HTML: <template><!-- 返回顶部组件 2020-02-17 Walke ...
从 0 到 1 用 Vue 封装一个日历组件
写在前面双手奉上代码链接: 传送门 - ajun568(https://github.com/ajun568/vue-calendar),点击文末阅读原文直达双脚奉上最终效果图: 需求分析需求分 ...
vue封装一个弹幕组件
说在前面
Element(3) 使用v-org-tree组件实现组织树形菜单
一.前言 iview-admin中提供了 v-org-tree 这么一个vue组件可以实现树形菜单,下面小编来提供一下在element-ui中的使用教程小编集成了el-dropdown下拉菜单(鼠标 ...
vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table，treeTable
该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install ...
Vue 人资实战篇七员工管理上封装通用的组件、formatter属性、过滤器的使用、树形结构、建立公共导入的页面路由、excel的导入和导出、
1.0 封装一个通用的工具栏目标:封装一个通用的工具栏供大家使用 1.1 通用工具栏的组件结构在后续的业务开发中,经常会用到一个类似下图的工具栏,作为公共组件,进行一下封装组件 src/comp ...

Vue封装树形菜单组件

Vue封装树形菜单组件相关推荐

最新文章

热门文章