init

src/components/TreeTable/readme.md

@@ -1,99 +0,0 @@
-## 写在前面
-
-此组件仅提供一个创建 TreeTable 的解决思路，本组件充分利用 vue 插槽的特性，方便用户自定义
-
-evel.js 里面 `addAttrs` 方法会给数据添加几个属性，treeTotable 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
-
-调用 addAttrs 后，因\_\_parent 属性，会造成数据循环引用，使用 JSON.stringify()报错，所以转成 JSON 之前需要清除\_\_parent 属性。
-
-## prop 说明
-
-- data（原始数据，要求是一个数组或者对象）
-- columns（列属性,要求是一个数组）
-- renderContent（数组扁平化方法（可选））
-- defaultExpandAll（默认是否全部展开，默认全部展开）
-- defaultChildren（子元素名，默认为 children）
-- spreadOffset（扩展符号的偏移量，默认为 50px）
-- checkboxOffset（复选框的偏移量，默认为 50px）
-
----
-
-### 代码示例
-
-- data(**必填**)
-
-原始数据,
-
-```js
-const data = [
-  {
-    key1: value1,
-    key2: value2,
-    children: [
-      {
-        key1: value1
-      },
-      {
-        key1: value1
-      }
-    ]
-  },
-  {
-    key1: value1
-  }
-]
-```
-
-或者
-
-```javascript
-   {
-     key1: value1,
-     key2: value2,
-     children: [{
-       key1: value1
-     },
-     {
-       key1: value1
-     }]
-   }
-```
-
-- columns
-
-1. label: 显示在表头的文字
-2. key: 对应 data 的 key。treeTable 将显示相应的 value
-3. width: 每列的宽度，为一个数字(可选)
-
-树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
-
-```javascript
-const columns = [
-  // 建议第一列做展开收缩操作
-  { label: '', key: '__spread', width: '200' },
-  // 如果添加复选框
-  { label: '', key: '__checkbox', width: '200' },
-  {
-    label: string,
-    key: string,
-    width: number
-  },
-  {
-    label: string,
-    key: string,
-    width: number
-  }
-]
-```
-
-#### renderContent
-
-解析函数，function，非必须
-
-如果不提供，将使用默认的[evalFunc](./eval.js)
-
-如果提供了 evalFunc,那么会用提供的 evalFunc 去解析 data，并返回 treeTable 渲染所需要的值。
-
-## 其他
-
-如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue

src/icons/svg/tree-table.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M44.8 0h79.543C126.78 0 128 1.422 128 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H44.8c-2.438 0-3.657-1.422-3.657-4.267V4.267C41.143 1.422 42.362 0 44.8 0zm22.857 48h56.686c2.438 0 3.657 1.422 3.657 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H67.657C65.22 80 64 78.578 64 75.733V52.267C64 49.422 65.219 48 67.657 48zm0 48h56.686c2.438 0 3.657 1.422 3.657 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H67.657C65.22 128 64 126.578 64 123.733v-23.466C64 97.422 65.219 96 67.657 96zM50.286 68.267c2.02 0 3.657-1.91 3.657-4.267 0-2.356-1.638-4.267-3.657-4.267H17.37V32h6.4c2.02 0 3.658-1.91 3.658-4.267V4.267C27.429 1.91 25.79 0 23.77 0H3.657C1.637 0 0 1.91 0 4.267v23.466C0 30.09 1.637 32 3.657 32h6.4v80c0 2.356 1.638 4.267 3.657 4.267h36.572c2.02 0 3.657-1.91 3.657-4.267 0-2.356-1.638-4.267-3.657-4.267H17.37V68.267h32.915z"/></svg>

src/router/index.js

@@ -10,6 +10,7 @@ import Layout from '@/views/layout/Layout'
 import componentsRouter from './modules/components'
 import chartsRouter from './modules/charts'
 import tableRouter from './modules/table'
+import treeTableRouter from './modules/tree-table'
 import nestedRouter from './modules/nested'
 
 /** note: sub-menu only appear when children.length>=1
@@ -162,6 +163,7 @@ export const asyncRouterMap = [
   chartsRouter,
   nestedRouter,
   tableRouter,
+  treeTableRouter,
 
   {
     path: '/example',

src/router/modules/table.js

@@ -30,18 +30,6 @@ const tableRouter = {
       name: 'InlineEditTable',
       meta: { title: 'inlineEditTable' }
     },
-    {
-      path: 'tree-table',
-      component: () => import('@/views/table/treeTable/treeTable'),
-      name: 'TreeTableDemo',
-      meta: { title: 'treeTable' }
-    },
-    {
-      path: 'custom-tree-table',
-      component: () => import('@/views/table/treeTable/customTreeTable'),
-      name: 'CustomTreeTableDemo',
-      meta: { title: 'customTreeTable' }
-    },
     {
       path: 'complex-table',
       component: () => import('@/views/table/complexTable'),

src/router/modules/tree-table.js

@@ -0,0 +1,29 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from '@/views/layout/Layout'
+
+const treeTableRouter = {
+  path: '/tree-table',
+  component: Layout,
+  redirect: '/table/complex-table',
+  name: 'TreeTable',
+  meta: {
+    title: 'treeTable',
+    icon: 'tree-table'
+  },
+  children: [
+    {
+      path: 'index',
+      component: () => import('@/views/tree-table/index'),
+      name: 'TreeTableDemo',
+      meta: { title: 'treeTable' }
+    },
+    {
+      path: 'custom',
+      component: () => import('@/views/tree-table/custom'),
+      name: 'CustomTreeTableDemo',
+      meta: { title: 'customTreeTable' }
+    }
+  ]
+}
+export default treeTableRouter