feat: use zTree

package.json

@@ -23,6 +23,7 @@
     "vue-cropper": "^0.4.4",
     "vue-ls": "^3.2.0",
     "vue-router": "^3.0.1",
+    "vue-ztree-2.0": "^1.0.4",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/config/router.config.js

@@ -63,7 +63,13 @@ export const asyncRouterMap = [
             name: 'AdvanceForm',
             component: () => import('@/views/form/advancedForm/AdvancedForm'),
             meta: { title: '高级表单', permission: [ 'form' ] }
-          }
+          },
+          {
+            path: '/form/ztree-demo',
+            name: 'ZtreeDemo',
+            component: () => import('@/views/form/ZtreeDemo'),
+            meta: { title: 'zTreeDemo', permission: [ 'form' ] }
+          },
         ]
       },
 

src/main.js

@@ -15,6 +15,11 @@ import '@/utils/filter' // base filter
 import PermissionHelper from '@/utils/helper/permission'
 import { removeLoadingAnimate } from '@/utils/util'
 
+import vueztree from 'vue-ztree-2.0/dist/vue-ztree-2.0.umd.min.js'
+import 'vue-ztree-2.0/dist/vue-ztree-2.0.css'
+
+Vue.use(vueztree)
+
 import {
   ACCESS_TOKEN,
   DEFAULT_COLOR,

src/views/form/ZtreeDemo.vue

+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <vue-ztree :list.sync='zTreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='true'></vue-ztree>
+  </a-card>
+</template>
+
+<script>
+  export default {
+    name: 'BaseForm',
+    data () {
+      return {
+        description: 'zTree',
+        value: 1,
+
+        zTreeDataSource:[{
+          id:1,
+          name:"音乐",
+          children:[],
+          url:"http://www.baidu.com"
+        },{
+          id:2,
+          name:"视频",
+          children:[{
+            id:3,
+            name:"电影",
+            children:[{
+              id:4,
+              name:"国产电影",
+              url:""
+            },{
+              id:5,
+              name:"好莱坞电影",
+              url:""
+            },{
+              id:6,
+              name:"小语种电影",
+              url:""
+            }]
+          },{
+            id:7,
+            name:"短片",
+            children:[{
+              id:9,
+              name:"电视剧",
+              url:""
+            },{
+              id:10,
+              name:"短片",
+              url:""
+            }]
+          }]
+        }]
+      }
+    },
+    methods: {
+      // 点击节点
+      nodeClick:function(m){
+        console.log(JSON.parse(JSON.stringify(m)));
+      },
+      // 右击事件
+      contextmenuClick:function(m){
+        console.log(m)
+        console.log("触发了自定义的contextmenuClick事件");
+      },
+      // 点击展开收起
+      expandClick:function(m){
+        console.log(JSON.parse(JSON.stringify(m)));
+        // 点击异步加载
+        if(m.isExpand) {
+          // 动态加载子节点, 模拟ajax请求数据
+          // 请注意 id 不能重复哦。
+          if(m.hasOwnProperty("children")){
+
+            m.loadNode = 1; // 正在加载节点
+
+            setTimeout(()=>{
+
+              m.loadNode = 2; // 节点加载完毕
+
+              m.isFolder = !m.isFolder;
+
+              m.children.push({
+                id:+new Date(),
+                name:"动态加载节点1",
+                path:"",
+                clickNode:false,
+                isFolder:false,
+                isExpand:false,
+                loadNode:0,
+                children:[{
+                  id:+new Date()+1,
+                  name:"动态加载末节点",
+                  path:"",
+                  clickNode:false,
+                  isExpand:false,
+                  isFolder:false,
+                  loadNode:0
+                }]
+              })
+            },1000)
+
+          }
+        }
+      }
+
+    }
+  }
+</script>
\ No newline at end of file

vue.config.js

@@ -75,5 +75,6 @@ module.exports = {
     }
   },
 
-  lintOnSave: undefined
+  lintOnSave: undefined,
+  runtimeCompiler: true
 }
\ No newline at end of file

yarn.lock

@@ -9125,6 +9125,11 @@ vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
   integrity sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==
 
+vue-ztree-2.0@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vue-ztree-2.0/-/vue-ztree-2.0-1.0.4.tgz#4559519a31be2e84f3afa90c821e76b5b58c563c"
+  integrity sha512-d7KZsquEYpM0jD/k1uwOMFCd08L6++7zwRESaL2sF43OtRFCump8BxcLpjusBIHpFadPvOSMMnK5P41y+ZiTlA==
+
 vue@^2.5.17, vue@^2.5.3:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"