From 5ca6f798364a67718a08ed29321bd4547573cf5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Thu, 7 Mar 2019 14:13:36 +0800 Subject: [PATCH] perf[Tree-Table]: organize the structure and add documentation (#1673) --- src/components/TreeTable/README.md | 220 ++++++++++++++++++ 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 | 4 +- .../custom/index.vue} | 23 +- src/views/tree-table/data.js | 80 +++++++ .../treeTable.vue => tree-table/index.vue} | 96 ++------ 10 files changed, 365 insertions(+), 201 deletions(-) create mode 100644 src/components/TreeTable/README.md 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 (94%) rename src/views/{table/treeTable/customTreeTable.vue => tree-table/custom/index.vue} (87%) create mode 100644 src/views/tree-table/data.js rename src/views/{table/treeTable/treeTable.vue => tree-table/index.vue} (55%) diff --git a/src/components/TreeTable/README.md b/src/components/TreeTable/README.md new file mode 100644 index 00000000..05326dfa --- /dev/null +++ b/src/components/TreeTable/README.md @@ -0,0 +1,220 @@ + +- [Enlgish](#Brief) + +# 中文 + +## 写在前面 + +此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。 + +并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。 + +`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。 + +## Props 说明 + +| Attribute | Description | Type | Default | +| :--------------: | :--------------------------------- | :-----: | :------: | +| data | 原始展示数据 | Array | [] | +| columns | 列属性 | Array | [] | +| defaultExpandAll | 默认是否全部展开 | Boolean | false | +| defaultChildren | 指定子树为节点对象的某个属性值 | String | children | | +| indent | 相邻级节点间的水平缩进，单位为像素 | Number | 50 | + +> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。 + +--- + +### 代码示例 + +```html + +``` + +#### data(**必填**) + +```js +const data = [ + { + name:'1' + children: [ + { + name: '1-1' + }, + { + name: '1-2' + } + ] + }, + { + name: `2` + } +] +``` + +#### columns(**必填**) + +- label: 显示在表头的文字 +- key: 对应 data 的 key。treeTable 将显示相应的 value +- expand: `true` or `false`。若为 true，则在该列显示展开收起图标 +- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox` +- width: 每列的宽度，为一个数字(可选)。例如`200` +- align: 对齐方式 `left/center/right` +- header-align: 表头对齐方式 `left/center/right` + +```javascript +const columns = [ + { + label: 'Checkbox', + checkbox: true + }, + { + label: '', + key: 'id', + expand: true + }, + { + label: 'Event', + key: 'event', + width: 200, + align: 'left' + }, + { + label: 'Scope', + key: 'scope' + } +] +``` + +> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现 + +```html + +``` + +## Events + +目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。 + +```js +this.$refs.TreeTable.addChild(row, data) //添加子元素 +this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素 +this.$refs.TreeTable.delete(row) //删除该元素 +``` + +## 其他 + +如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue + +# English + +## Brief + +This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed. + +And this component makes full use of the features of the `vue` slot to make it user-friendly. + +In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties. + +## Props + +| Attribute | Description | Type | Default | +| :--------------: | :----------------------------------------------------------- | :-----: | :------: | +| data | original display data | Array | [] | +| columns | column attribute | Array | [] | +| defaultExpandAll | whether to expand all nodes by default | Boolean | false | +| defaultChildren | specify which node object is used as the node's subtree | String | children | | +| indent | horizontal indentation of nodes in adjacent levels in pixels | Number | 50 | + +> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details. + +--- + +### Example + +```html + +``` + +#### data(**Required**) + +```js +const data = [ + { + name:'1' + children: [ + { + name: '1-1' + }, + { + name: '1-2' + } + ] + }, + { + name: `2` + } +] +``` + +#### columns(**Required**) + +- label: text displayed in the header +- key: data.key will show in column +- expand: `true` or `false` +- checkbox: `true` or `false` +- width: column width 。such as `200` +- align: alignment `left/center/right` +- header-align: alignment of the table header `left/center/right` + +```javascript +const columns = [ + { + label: 'Checkbox', + checkbox: true + }, + { + label: '', + key: 'id', + expand: true + }, + { + label: 'Event', + key: 'event', + width: 200, + align: 'left' + }, + { + label: 'Scope', + key: 'scope' + } +] +``` + +> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot. + +```html + +``` + +## Events + +Several methods are currently available, but only the `beta` version, which is likely to be modified later. + +```js +this.$refs.TreeTable.addChild(row, data) //Add child elements +this.$refs.TreeTable.addBrother(row, data) //Add a sibling element +this.$refs.TreeTable.delete(row) //Delete the element +``` + +## Other + +If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue 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 94% rename from src/views/table/treeTable/data.js rename to src/views/tree-table/custom/data.js index a1bbbaf1..020f6247 100644 --- a/src/views/table/treeTable/data.js +++ b/src/views/tree-table/custom/data.js @@ -1,4 +1,4 @@ -export const data = [ +const data = [ { name: '1', timeLine: 100, @@ -47,3 +47,5 @@ export const data = [ } ] +export default data + diff --git a/src/views/table/treeTable/customTreeTable.vue b/src/views/tree-table/custom/index.vue similarity index 87% rename from src/views/table/treeTable/customTreeTable.vue rename to src/views/tree-table/custom/index.vue index 1ed346fb..6f9142a6 100644 --- a/src/views/table/treeTable/customTreeTable.vue +++ b/src/views/tree-table/custom/index.vue @@ -1,12 +1,10 @@