vue组件递归实现左侧菜单导航树

这里使用的是 vue-cli 的webpack打包工具

首先准备好我们符合递归条件的数据

./build/mack/data.json

[
  {
    "id": 1,
    "name": "第一层",
    "children": [
      {
        "name": "第二层"
      },
      {
        "name": "第二层"
      },
      {
        "name": "第二层"
      }
    ]
  },
  {
    "id": 1,
    "name": "第一层",
    "children": [
      {
        "name": "第二层"
      },
      {
        "name": "第二层",
        "children": [
          {
            "name": "第三层"
          },
          {
            "name": "第三层"
          },
          {
            "name": "第三层"
          }
        ]
      },
      {
        "name": "第二层",
        "children": [
          {
            "name": "第三层"
          },
          {
            "name": "第三层"
          },
          {
            "name": "第三层",
            "children": [
              {
                "name": "第四层"
              },
              {
                "name": "第四层"
              },
              {
                "name": "第四层",
                "children": [
                  {
                    "name": "第五层"
                  },
                  {
                    "name": "第五层"
                  },
                  {
                    "name": "第五层"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

复制代码

创建接口

./webpack.dev.conf.js

devServer: {
    ...
    before: require('./mock/index')
  },
复制代码

./mock/index

const data = require('./data')
module.exports = function (app) {
  app.get('/data', (require, result) => {
    result.send(data)
  })
}

复制代码

简单封装 fetch工具 ./src/api.js

export async function request (url) {
  return fetch(url).then(res => {
    return res.json()
  }).then(data => data)
}

复制代码

封装组建

./src/components/accordion.vue

复制代码

调用组建

./src/components/HelloWorld.vue

复制代码

项目地址：

github.com/wangjinshen…

转载于:https://juejin.im/post/5c6e008851882532cd5785a7