layui无限级左侧导航实现，基于vue实现layui无限级导航

初衷：layui关于导航的文档说明是在太少了，引用了它的导航基本上可以说只用了样式，其他功能都得自己写。

使用时要先正确引入layui.js和css,需自定义导航的也可参照这个思路实现，有用到的都评论一个呗，谢了！

对你有帮助的话就帮我扫一下支付宝红包呗，不要的扫给我也可以，谢谢了各位，有啥需要可以在下方留言，多金大佬也可以打赏些小费。

效果图：

 html部分： 

<template>
<div class="nav-left" style="display:inline-block;position:absolute;top:0;left:0;height:100%;">
      <ul class="layui-nav layui-nav-tree" lay-filter="demo" style="height:100%;cursor:pointer;user-select:none">
        <li :class="['layui-nav-item', i.isOpen ? 'layui-nav-itemed' : '']" v-if="navs.length > 0" v-for="i in navs">
          <a @click="navClick(i)" href="javascript:;" style="text-align:left">{{i.name}}<span v-if="i.chlind.length > 0" class="layui-nav-more"></span></a>
          <tree v-if="i.chlind.length > 0" :treeData="i.chlind" ceng="1" @nodeClick="nodeClick"></tree>
        </li>
      </ul>
    </div>
</template>

js部分：

<script>
import tree from '@/components/tree.vue' 
export default {
  name: 'App',
  components: {
    tree
  },
  data () {
    return {
      isOpenAll: true,
      paddingLeft: 0,
      navs: []
    }
  },
  mounted () {
    let v = this
      v.navs = [{
          'id': 1,
          'name': '下单查询',
          'uri': '\/admin\/datas\/order\/details',
          'path': '',
          'display': 1,
          'chlind': [{
            'id': 2,
            'name': '很好',
            'chlind': []
          }],
          'exists_chlind': 1
        },{
          'id': 3,
          'name': '首页',
          'uri': '\/admin\/datas\/order\/details',
          'path': '',
          'display': 1,
          'chlind': [{
            'id': 4,
            'name': '你的',
            'chlind': []
          },{
            'id': 4,
            'name': '我的',
            'chlind': [
              {
                id: 10,
                name: '同学',
                chlind: []
              },{
                id: 10,
                name: '朋友',
                chlind: []
              },{
                id: 10,
                name: '同事',
                chlind: [{
                  id: '11',
                  name: '前公司',
                  chlind: []
                },{
                  id: '11',
                  name: '现公司',
                  chlind: []
                }]
              },{
                id: 10,
                name: '兄弟',
                chlind: []
              }
            ]
          },{
            'id': 4,
            'name': '她的',
            'chlind': []
          },{
            'id': 4,
            'name': '他的',
            'chlind': []
          }],
          'exists_chlind': 1
        }]
        v.navs = v.transform(v.navs)
  },
  methods: {
    nodeClick (data) {
      this.nodeControl(data)
    },
    nodeControl (data) {
      let str = ''
      let v = this
      if (data.chlind.length > 0) {
        if (data.index.length > 1) {
          data.index.forEach((e,index) => {
            console.log(e, 'e')
            if (index > 0 && index < data.index.length - 1) {
              str += `.chlind[${e}]`
            } else if (index == 0) {
              str = `v.navs[${e}]`
            }
          })
          let a = eval(str).chlind[data.index[data.index.length - 1]]
          a.isOpen =! a.isOpen
          eval(str).chlind.splice(data.index[data.index.length - 1], 1, a)
        } else {
          let a = v.navs[data.index[0]]
          a.isOpen =! a.isOpen
          console.log(a, 'a')
          v.navs.splice(data.index[0],1,a)
        }
      }
    },
    navClick (data) {
      let v = this
      v.nodeControl(data)
    },
    transform (data, souyin) {
      let v = this
      data.forEach((e, index) => {
        if (souyin) {
          let a = JSON.stringify(souyin)
          e.index = JSON.parse(a)
        } else {
          e.index = []
        }
        e.index.push(index)
        if (e.chlind.length > 0) {
          e.isOpen = v.isOpenAll
          this.transform(e.chlind, e.index)
        }
      })
      return data
    }
  }
}
</script>

tree.vue:

<template>
	<dl class="layui-nav-child">
	    <dd v-for="i in treeData" :class="[i.chlind.length > 0 ? 'layui-nav-item' : '', i.isOpen ? 'layui-nav-itemed' : '']">
	    	<a @click="nodeClick(i)" :style="{'text-align':'left','text-indent': ceng + 'em'}">{{i.name}}<span v-if="i.chlind.length > 0" class="layui-nav-more"></span></a>
	    	<tree v-if="i.chlind.length > 0" :treeData='i.chlind' @nodeClick="maopao" :ceng="Number(ceng) + 1"></tree>
	    </dd>
	</dl>
</template>
<script>
	export default {
		name: 'tree',
		props: ['treeData', 'ceng'],
		data () {
			return {

			}
		},
		mounted () {

		},
		methods: {
			nodeClick (data) {
				this.$emit('nodeClick', data)
			},
			maopao (data) {
				this.$emit('nodeClick', data)
			}
		}
	}
</script>