vue左侧菜单，树形图递归实现

最近在做一个后台管理系统，左侧菜单需求是这样的，可以多层，数据由后台传递。先说说遇到的坑，由于是子父组件，当时传递使用的是子父组件的传递，但是这时候只能获取到第一层的数据，第二层往后获取不到数据，踩了一下午坑以后才知道，子组件使用了递归组件，这时候他已经不能往父组件传递了，子传父，只能逐层传递这时候已经隔层了，所以我使用了非子父组件传递，两个页面都引入bus.js，这里不懂的请百度。bus.jsi

前端小白16

10049人浏览 · 2018-04-26 14:21:14

前端小白16 · 2018-04-26 14:21:14 发布

最近在做一个后台管理系统，左侧菜单需求是这样的，可以多层，数据由后台传递。

先说说遇到的坑，由于是子父组件，当时传递使用的是子父组件的传递，但是这时候只能获取到第一层的数据，第二层往后获取不到数据，踩了一下午坑以后才知道，子组件使用了递归组件，这时候他已经不能往父组件传递了，子传父，只能逐层传递这时候已经隔层了，所以我使用了非子父组件传递，两个页面都引入bus.js，这里不懂的请百度。

bus.js

 
  import Vue 
  from 
  'vue' 
 
 
  export 
  default 
  new 
  Vue 
 

父组件内容

   < 
  ul 
  v-for="menuItem 
  in theModel"> 
 

   < 
  my-tree : 
  model="menuItem"></ 
  my-tree> 
 

   </ 
  ul> 
 

模拟后台数据

   theModel:[{ 
 
  'id': 
  '1', 
 
  'menuName': 
  '导航1', 
 
  'menuCode': 
  '10', 
 
  'menuUrl': 
  '', 
 
  'childMenus': [ 
 
    { 
 
  'menuName': 
  '用户管理', 
 
  'menuCode': 
  '11', 
 
  'menuUrl': 
  '/home', 
 
  'menuPath': 
  '', 
 
  'childMenus':[{ 
 
  'menuName': 
  '11111', 
 
  'menuCode': 
  '12', 
 
  'menuUrl': 
  '/systemjuri', 
 
  'menuPath': 
  '', 
 
  'childMenus': [] 
 
    }] 
 
    }, 
 
    { 
 
  'menuName': 
  '角色管理', 
 
  'menuCode': 
  '12', 
 
  'menuUrl': 
  '/systemjuri', 
 
  'menuPath': 
  '', 
 
  'childMenus': [] 
 
    }, 
 
    { 
 
  'menuName': 
  '菜单管理', 
 
  'menuUrl': 
  '/systemmenu', 
 
  'menuCode': 
  '13', 
 
  'menuPath': 
  'http://10.63.195.214:8080/menuManage/html/index_3.html', 
 
  'childMenus':[] 
 
    }] 
 
    },{ 
 
  'id': 
  '1', 
 
  'menuName': 
  '导航2', 
 
  'menuCode': 
  '10', 
 
  'childMenus':[] 
 
   }],

父组件引入子组件

 
 import myTree 
 from 
 './treeMenu.vue' 

 
  export 
  default { 
 
        components: { 
  
        myTree 
  
        }, 
  
}

父组件接受子组件传递的数据

 
 bus. 
 $on( 
 "childEvent", 
 function( 
 transmit) {}) 

下面是子组件内容，子组件名称treeMenu，name: 'treeMenu',

   < 
  template> 
 
   < 
  li> 
 
   < 
  span @ 
  click=" 
  toggle( 
  model. 
  menuName, 
  model. 
  menuUrl, 
  model. 
  menuPath)"> 
 
   < 
  i 
  v-if=" 
  !isFolder" 
  class= 
  "icon file-text">●</ 
  i> 
 
   {{ 
  model. 
  menuName }} 
 
   < 
  i 
  v-if="isFolder" 
  class= 
  "icon" : 
  class="[open 
  ? 
  'folder-open' 
  : 
  'folder']"></ 
  i> 
 
   </ 
  span> 
 
   < 
  ul 
  v-show="open" 
  v-if="isFolder"> 
 
   < 
  tree-menu 
  v-for="item 
  in 
  model. 
  childMenus" : 
  model="item" : 
  key=" 
  item. 
  menuId"></ 
  tree-menu> 
 
   </ 
  ul> 
 
   </ 
  li> 
 
   </ 
  template> 
 
   < 
  script> 
 
  import bus 
  from 
  "./../../../static/js/bus"; 
 
  export 
  default { 
 
   name: 
  'treeMenu', 
 
   props: [ 
  'model'], 
 
  data() { 
 
  return { 
 
   open: 
  false, 
 
   } 
 
   }, 
 
   computed: { 
 
  isFolder() { 
 
  return 
  this. 
  model. 
  childMenus 
  && 
  this. 
  model. 
  childMenus. 
  length 
 
   } 
 
   }, 
 
   methods: { 
 
  toggle( 
  msg, 
  menuUrl, 
  menuPath) { 
 
  if ( 
  this. 
  isFolder) { 
 
  this. 
  open 
  = 
  !this. 
  open 
 
   } 
 
  var json 
  = { msg: msg, menuUrl: menuUrl,menuPath:menuPath }; 
 
  bus. 
  $emit( 
  "childEvent", json) 
 
   }, 
 
   } 
 
   } 
 
   </ 
  script> 
 
   < 
  style> 
 
  ul { 
 
  list-style: 
  none; 
 
   } 
 
  i 
  .icon { 
 
  display: 
  inline-block; 
 
  width: 
  15 
  px; 
 
  height: 
  15 
  px; 
 
  background-repeat: 
  no-repeat; 
 
  vertical-align: 
  middle; 
 
  float: 
  right; 
 
  margin-top: 
  17 
  px; 
 
  margin-right: 
  30 
  px; 
 
   } 
 
  .icon.folder { 
 
  background-image: 
  url( 
  './homeimg/left_1.png'); 
 
   } 
 
  .icon.folder-open { 
 
  background-image: 
  url( 
  './homeimg/dowm_1.png'); 
 
   } 
 
  .icon.file-text { 
 
   } 
 
  ul 
  li 
  ul 
  li 
  .icon.folder { 
 
  background-image: 
  url( 
  './homeimg/left_2.png'); 
 
   } 
 
  ul 
  li 
  ul 
  li 
  .icon.folder-open { 
 
  background-image: 
  url( 
  './homeimg/down_2.png'); 
 
   } 
 
  .tree-menu 
  li { 
 
  line-height: 
  50 
  px; 
 
   } 
 
  span{ 
 
  display: 
  block; 
 
  width: 
  100 
  %; 
 
  height: 
  100 
  %; 
 
   } 
 
  ul{ 
 
  padding-left: 
  10 
  px; 
 
   } 
 
  ul 
  li 
  span{ 
 
  text-indent: 
  10 
  px; 
 
   } 
 
  ul 
  li 
  ul{ 
 
  background: 
  #ebf1f8; 
 
  color: 
  #1457a7; 
 
   } 
 
  li 
  :hover{ 
 
  cursor: 
  pointer; 
 
   } 
 
   </ 
  style>

由于用了递归组件所以name需要和<tree-menu>对应起来

展示

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^