①带有父子关系的标准

zTreeNodes

举例:

Js代码

1.var zTreeNodes = [

2.{"id":1, "name":"test1", "nodes":[

3.{"id":11, "name":"test11", "nodes":[

4.{"id":111, "name":"test111"}

5."id":12, "name":"test12"}

②带有父子关系的简单

Array

格式

(isSimpleData)的zTreeNodes

举例：

Js代码

1.var treeNodes = [

2. {"id":1, "pId":0, "name":"test1"},

3.{"id":11, "pId":1, "name":"test11"},

4. {"id":12, "pId":1, "name":"test12"},

5. {"id":111, "pId":11, "name":"test111"},

例子：

(Java代码)

①在页面引用

zTree的js和css：

Html代码

1.

<!-- ZTree树形插件 -->

2.<link

rel="stylesheet"

href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type

="text/css">

3.<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->

4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"

></script>

main.js 作为入口：

import Vue from 'vue'import main from './components/main.vue' new Vue({ el: '#app', render: h =>h(main)})

它引入了一个组件 main.vue：

<template> <div> <my-tree :data="theData" :name="menuName" :loading="loading" @getSubMenu="getSubMenu"></my-tree> </div></template><script>const myData = [ {id: '1',menuName: '基础管理',menuCode: '10' }, {id: '2',menuName: '商品管理',menuCode: '' }, {id: '3',menuName: '订单管理',menuCode: '30',children: [ {menuName: '订单列表',menuCode: '31' }, {menuName: '退货列表',menuCode: '32',children: [] }] }, {id: '4',menuName: '商家管理',menuCode: '',children: [] }]const subMenuData1 = { parentId: '1', children: [{ menuName: '用户管理', menuCode: '11'},{ id: '12', menuName: '角色管理', menuCode: '12', children: [{ menuName: '管理员', menuCode: '121'},{ menuName: 'CEO', menuCode: '122'},{ menuName: 'CFO', menuCode: '123'},{ menuName: 'COO', menuCode: '124'},{ menuName: '普通人', menuCode: '124'} ]},{ menuName: '权限管理', menuCode: '13'} ]}const subMenuData2 = { parentId: '2', children: [{ menuName: '商品一', menuCode: '21'},{ id: '22', menuName: '商品二', menuCode: '22', children: [{ menuName: '子类商品1', menuCode: '221'},{ menuName: '子类商品2', menuCode: '222'} ]} ]}import myTree from './common/treeMenu.vue'export default { components: {myTree }, data () {return { theData: myData, menuName: 'menuName', // 显示菜单名称的属性 loading: false} }, methods: {getSubMenu (menuItem, callback) { this.loading = true if (menuItem.id === subMenuData1.parentId) {this.loading = false menuItem.children = subMenuData1.children callback(menuItem.children) } setTimeout(() =>{if (menuItem.id === subMenuData2.parentId) { this.loading = false menuItem.children = subMenuData2.children callback(menuItem.children) } }, 2000) } }}</script>

subMenuData1, subMenuData2 存放子菜单数据，可以从服务器获取，以实现动态加载。

该文件引入了树形组件 treeMenu.vue：

<template> <ul class="tree-menu"> <li v-for="(item, index) in data"> <span @click="toggle(item, index)"> <i :class="['icon', item.children &&item.children.length ? folderIconList[index] : 'file-text', loading ? loadingIconList[index] : '']"></i> {{ item[name] || item.menuName }} </span> <tree-menu v-if="scope[index]" :data="item.children"></tree-menu> </li> </ul></template><script>export default { name: 'treeMenu', props: {data: Array,name: String,loading: Boolean }, data () {return { folderIconList: [], loadingIconList: [], scope: {}} }, created () {this.data.forEach((item, index) =>{ if (item.children &&item.children.length) {this.folderIconList[index] = 'folder' }}) }, methods: {doTask (index) { this.$set(this.scope, index, !this.scope[index]) this.folderIconList[index] = this.scope[index] ? 'folder-open' : 'folder' },toggle (item, index) { this.loadingIconList = [] if (item.children &&item.children.length) {this.doTask(index) } else {this.loadingIconList[index] = 'loading'this.$emit('getSubMenu', item, (subMenuList) =>{ if (subMenuList &&subMenuList.length) {this.doTask(index) }}) }} }}</script><style scoped>.tree-menu { list-style: none}.tree-menu li { line-height: 2}.tree-menu li span { cursor: default}.icon { display: inline-block width: 15px height: 15px background-repeat: no-repeat vertical-align: -2px}.icon.folder { background-image: url(/src/assets/folder.png)}.icon.folder-open { background-image: url(/src/assets/folder-open.png)}.icon.file-text { background-image: url(/src/assets/file-text.png)}.icon.loading { background-image: url(/src/assets/loading.gif) background-size: 15px}</style>