vue.js 树菜单 递归组件树来实现
2017-11-16 11:28
856 查看
树形视图 Example: https://vuefe.cn/v2/examples/tree-view.html
参照前辈方法实现的,觉得不错,记录一下:
父组件:
<!-- 菜单树 --> <ul class="T_down" v-for="(menuItem,index) in customerArray" :key="index"> <tree-menu :treeData="menuItem"></tree-menu> </ul> import treeMenu from './treeMenu.vue' myMailTree: [ { id: 0, label: '发件箱', children: [] }, { id: 1, label: '收件箱', children: [ { id: 11, label: '常用邮件', }, { id: 12, label: '常用邮件', children: [ { id: 11, label: '常用邮件', children: [ { id: 11, label: '常用邮件', }, { id: 12, label: '常用邮件', children: [ { id: 11, label: '常用邮件', }, { id: 12, label: '常用邮件', children: [ { id: 11, label: '常用邮件', }, { id: 12, label: '常用邮件', }, ] }, ] }, ] }, { id: 12, label: '常用邮件', }, ] }, ] }, { id: 3, label: '草稿箱', }, ], components: { 'tree-menu': treeMenu },
子组件:
<template> <li> <h3> <i v-if="isFolder" @click="toggle" class="iconfont" :class="[open ? 'icon-arrow-down': 'icon-arrow-right']"></i> <span class="label">{{treeData.label}} <em>(99)</em> </span> <span class="T_set"> <i class="iconfont icon-subordinate"></i> <i class="iconfont icon-subordinate"></i> <i class="iconfont icon-subordinate"></i> </span> </h3> <ul class="T_down" v-show="open" v-if="isFolder"> <tree-menu v-for="item in treeData.children" :key="item.id" :treeData="item"></tree-menu> </ul> </li> </template> <script> export default { name: 'treeMenu', props: ['treeData'], data() { return { open: false } }, computed: { isFolder() { return this.treeData.children && this.treeData.children.length } }, methods: { toggle: function() { if (this.isFolder) { this.open = !this.open } } } } </script>
less
ul.T_down { //菜单树 // border: 1px solid red; background-color: #fff; padding-left: 17px; line-height: 35px; li { >h3 { // border: 1px solid red; font-weight: normal; font-size: 14px; padding-left: 23px; cursor: default; position: relative; >i.iconfont { display: block; width: 23px; height: 100%; text-align: center; font-size: 12px; position: absolute; left: 0; top: 0; &:hover { color: #008cee; cursor: pointer; } } >span.label { color: #555; >em { font-size: 12px; font-style: normal; color: #888; } } &:hover { background-color: #ddd; span.T_set { display: block; } } span.T_set { float: right; margin-right: 10px; display: none; i.iconfont { display: inline-block; padding: 0 2px; font-size: 13px; &:hover { color: #008cee; cursor: pointer; } } } } } }
参考链接:
https://www.cnblogs.com/caihg/p/6208105.html
.
相关文章推荐
- Vue.js 递归组件实现树形菜单
- 用 Vue.js 递归组件实现可折叠的树形菜单(demo)
- Vue.js 递归组件实现树形菜单(实例分享)
- 用Vue.js递归组件构建一个可折叠的树形菜单
- Vue.js递归组件构建树形菜单
- 用Vue.js递归组件构建一个可折叠的树形菜单
- Vue.js组件tree实现无限级树形菜单
- 用Vue.js递归组件构建一个可折叠的树形菜单
- Vue2递归组件实现树形菜单
- vue.js 组件实现简单分页效果
- Vue.js移动端左滑删除组件的实现代码
- vue.js开发实现全局调用的MessageBox组件实例代码
- 后台树状菜单,js实现递归无限分类
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- Vue.js 实现微信公众号菜单编辑器功能(一)
- Vue结合原生js实现自定义组件自动生成
- Vue.js中用webpack合并打包多个组件并实现按需加载
- vue.js与element-ui实现菜单树形结构的解决方法
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- vue.js2.0父子组件间传参 (一)实现弹窗