From 44a36c02354e6086bea7f4b35b3c663c73015b59 Mon Sep 17 00:00:00 2001 From: Pan Date: Thu, 7 Mar 2019 13:38:05 +0800 Subject: [PATCH] init --- src/components/TreeTable/readme.md | 99 ------------------- src/icons/svg/tree-table.svg | 1 + src/router/index.js | 2 + src/router/modules/table.js | 12 --- src/router/modules/tree-table.js | 29 ++++++ .../treeTable => tree-table/custom}/data.js | 0 .../custom/index.vue} | 0 .../treeTable.vue => tree-table/index.vue} | 0 8 files changed, 32 insertions(+), 111 deletions(-) delete mode 100644 src/components/TreeTable/readme.md create mode 100644 src/icons/svg/tree-table.svg create mode 100644 src/router/modules/tree-table.js rename src/views/{table/treeTable => tree-table/custom}/data.js (100%) rename src/views/{table/treeTable/customTreeTable.vue => tree-table/custom/index.vue} (100%) rename src/views/{table/treeTable/treeTable.vue => tree-table/index.vue} (100%) diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md deleted file mode 100644 index fe404ed0..00000000 --- a/src/components/TreeTable/readme.md +++ /dev/null @@ -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 diff --git a/src/icons/svg/tree-table.svg b/src/icons/svg/tree-table.svg new file mode 100644 index 00000000..8aafdb82 --- /dev/null +++ b/src/icons/svg/tree-table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 60524517..a4a71e46 100644 --- a/src/router/index.js +++ b/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', diff --git a/src/router/modules/table.js b/src/router/modules/table.js index a9c4cb44..4d7f55ef 100644 --- a/src/router/modules/table.js +++ b/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'), diff --git a/src/router/modules/tree-table.js b/src/router/modules/tree-table.js new file mode 100644 index 00000000..5ee26828 --- /dev/null +++ b/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 diff --git a/src/views/table/treeTable/data.js b/src/views/tree-table/custom/data.js similarity index 100% rename from src/views/table/treeTable/data.js rename to src/views/tree-table/custom/data.js diff --git a/src/views/table/treeTable/customTreeTable.vue b/src/views/tree-table/custom/index.vue similarity index 100% rename from src/views/table/treeTable/customTreeTable.vue rename to src/views/tree-table/custom/index.vue diff --git a/src/views/table/treeTable/treeTable.vue b/src/views/tree-table/index.vue similarity index 100% rename from src/views/table/treeTable/treeTable.vue rename to src/views/tree-table/index.vue