Vue和JQuery使用递归生成树状菜单

处理有时没办法列表的子元素有多少层嵌套
处理后效果如下
Vue和JQuery使用递归生成树状菜单_第1张图片
vue的代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <menu1 :data='list'></menu1>
  </div>

  <script>
    // 使用组件方法解决 定义一个组件 如果有children 就一直调用下去 跟递归思路一样
    Vue.component('menu1', {
      props: ['data'],
      template: `
  • {{item.name}}
`
}) var app = new Vue({ el: '#app', data() { return { list: [{ name: 'a', children: [ { name: 'a1', children: [ { name: 'a1-1' } ] }, { name: 'a2' } ] }, { name: 'b' }] } }, }) </script> </body> </html>

jq的代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
 <!-- 先导入jq -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
  // 处理数组结构如下
  var list = [{
    name: 'a', children: [
      {
        name: 'a1', children: [
          { name: 'a1-1' }
        ]
      },
      {
        name: 'a2'
      }
    ]
  }, {
    name: 'b'
  }]
  // list:要传入的结构树 node:从哪个节点开始生成 这里从body开始
  function createList(list, node) {
    // 创建ul节点
    var ul = $('
    '
    ) // 遍历节点 list.forEach(element => { ul.append(`
  • ${element.name}
  • `
    ) // 如果有子节点就再调用函数生成一次 if (element.children) { createList(element.children, ul) } }) // 实例化节点 node.append(ul) } createList(list, $('body')) </script> </body> </html>

    你可能感兴趣的:(Vue和JQuery使用递归生成树状菜单)