新增树状表格组件

package.json

@@ -24,6 +24,7 @@
     "js-cookie": "^2.2.0",
     "simplemde": "^1.11.2",
     "sortablejs": "^1.7.0",
+    "tree-table-vue": "^1.0.5",
     "vue": "^2.5.10",
     "vue-i18n": "^7.8.0",
     "vue-router": "^3.0.1",

src/locale/lang/en-US.js

@@ -36,5 +36,6 @@ export default {
   query: 'Query',
   params: 'Params',
   cropper_page: 'Cropper',
-  message_page: 'Message Center'
+  message_page: 'Message Center',
+  tree_table_page: 'Tree Table'
 }

src/locale/lang/zh-CN.js

@@ -36,5 +36,6 @@ export default {
   query: '带参路由',
   params: '动态路由',
   cropper_page: '图片裁剪',
-  message_page: '消息中心'
+  message_page: '消息中心',
+  tree_table_page: '树状表格'
 }

src/locale/lang/zh-TW.js

@@ -36,5 +36,6 @@ export default {
   query: '帶參路由',
   params: '動態路由',
   cropper_page: '圖片裁剪',
-  message_page: '消息中心'
+  message_page: '消息中心',
+  tree_table_page: '樹狀表格'
 }

src/main.js

@@ -11,13 +11,15 @@ import importDirective from '@/directive'
 import installPlugin from '@/plugin'
 import './index.less'
 import '@/assets/icons/iconfont.css'
+import TreeTable from 'tree-table-vue'
 // 实际打包时应该不引入mock
 /* eslint-disable */
 if (process.env.NODE_ENV !== 'production') require('@/mock')
 
 Vue.use(iView, {
   i18n: (key, value) => i18n.t(key, value)
 })
+Vue.use(TreeTable)
 /**
  * @description 注册admin内置插件
  */

src/router/routers.js

@@ -125,6 +125,15 @@ export default [
         },
         component: () => import('@/view/components/drag-list/drag-list.vue')
       },
+      {
+        path: 'tree_table_page',
+        name: 'tree_table_page',
+        meta: {
+          icon: 'md-git-branch',
+          title: '树状表格'
+        },
+        component: () => import('@/view/components/tree-table/index.vue')
+      },
       {
         path: 'cropper_page',
         name: 'cropper_page',

src/view/components/tree-table/index.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <Card shadow>
+      树状表格组件tree-table-vue，基于<a href="https://github.com/MisterTaki/vue-table-with-tree-grid">vue-table-with-tree-grid</a>进行开发，修复了一些bug，添加了一些新属性
+      <p><b>支持使用slot-scope进行自定义列渲染内容</b></p>
+      <p>文档请看<a href="https://github.com/lison16/tree-table-vue">https://github.com/lison16/tree-table-vue</a></p>
+      <tree-table expand-key="sex" :expand-type="false" :selection-type="false" :columns="columns" :data="data" >
+        <template slot="likes" slot-scope="scope">
+          <Button @click="handle(scope)">123</Button>
+        </template>
+      </tree-table>
+    </Card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tree_table_page',
+  data () {
+    return {
+      columns: [
+        {
+          label: 'name',
+          prop: 'name',
+          width: '400px'
+        },
+        {
+          label: 'sex',
+          prop: 'sex',
+          minWidth: '50px'
+        },
+        {
+          label: 'score',
+          prop: 'score'
+        },
+        {
+          label: 'likes',
+          prop: 'likes',
+          minWidth: '200px',
+          type: 'template',
+          template: 'likes'
+        }
+      ],
+      data: [
+        {
+          name: 'Jack',
+          sex: 'male',
+          likes: ['football', 'basketball'],
+          score: 10,
+          children: [
+            {
+              name: 'Ashley',
+              sex: 'female',
+              likes: ['football', 'basketball'],
+              score: 20,
+              children: [
+                {
+                  name: 'Ashley',
+                  sex: 'female',
+                  likes: ['football', 'basketball'],
+                  score: 20
+                },
+                {
+                  name: 'Taki',
+                  sex: 'male',
+                  likes: ['football', 'basketball'],
+                  score: 10,
+                  children: [
+                    {
+                      name: 'Ashley',
+                      sex: 'female',
+                      likes: ['football', 'basketball'],
+                      score: 20
+                    },
+                    {
+                      name: 'Taki',
+                      sex: 'male',
+                      likes: ['football', 'basketball'],
+                      score: 10,
+                      children: [
+                        {
+                          name: 'Ashley',
+                          sex: 'female',
+                          likes: ['football', 'basketball'],
+                          score: 20
+                        },
+                        {
+                          name: 'Taki',
+                          sex: 'male',
+                          likes: ['football', 'basketball'],
+                          score: 10
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              name: 'Taki',
+              sex: 'male',
+              likes: ['football', 'basketball'],
+              score: 10
+            }
+          ]
+        },
+        {
+          name: 'Tom',
+          sex: 'male',
+          likes: ['football', 'basketball'],
+          score: 20,
+          children: [
+            {
+              name: 'Ashley',
+              sex: 'female',
+              likes: ['football', 'basketball'],
+              score: 20,
+              children: [
+                {
+                  name: 'Ashley',
+                  sex: 'female',
+                  likes: ['football', 'basketball'],
+                  score: 20
+                },
+                {
+                  name: 'Taki',
+                  sex: 'male',
+                  likes: ['football', 'basketball'],
+                  score: 10
+                }
+              ]
+            },
+            {
+              name: 'Taki',
+              sex: 'male',
+              likes: ['football', 'basketball'],
+              score: 10,
+              children: [
+                {
+                  name: 'Ashley',
+                  sex: 'female',
+                  likes: ['football', 'basketball'],
+                  score: 20
+                },
+                {
+                  name: 'Taki',
+                  sex: 'male',
+                  likes: ['football', 'basketball'],
+                  score: 10
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: 'Tom',
+          sex: 'male',
+          likes: ['football', 'basketball'],
+          score: 20
+        },
+        {
+          name: 'Tom',
+          sex: 'male',
+          likes: ['football', 'basketball'],
+          score: 20,
+          children: [
+            {
+              name: 'Ashley',
+              sex: 'female',
+              likes: ['football', 'basketball'],
+              score: 20
+            },
+            {
+              name: 'Taki',
+              sex: 'male',
+              likes: ['football', 'basketball'],
+              score: 10
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    handle (scope) {
+      console.log(scope)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>