Skip to content

Commit 5ca6f79

Browse files
PanJiaChenPanJiaChen
authored
perf[Tree-Table]: organize the structure and add documentation (PanJiaChen#1673)
1 parent dc6030b commit 5ca6f79

File tree

10 files changed

+365
-201
lines changed

10 files changed

+365
-201
lines changed

‎src/components/TreeTable/README.md

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
2+
- [Enlgish](#Brief)
3+
4+
# 中文
5+
6+
## 写在前面
7+
8+
此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
9+
10+
并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
11+
12+
`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
13+
14+
## Props 说明
15+
16+
| Attribute | Description | Type | Default |
17+
| :--------------: | :--------------------------------- | :-----: | :------: |
18+
| data | 原始展示数据 | Array | [] |
19+
| columns | 列属性 | Array | [] |
20+
| defaultExpandAll | 默认是否全部展开 | Boolean | false |
21+
| defaultChildren | 指定子树为节点对象的某个属性值 | String | children | |
22+
| indent | 相邻级节点间的水平缩进，单位为像素 | Number | 50 |
23+
24+
> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
25+
26+
---
27+
28+
### 代码示例
29+
30+
```html
31+
<tree-table :data="data" :columns="columns" border>
32+
```
33+
34+
#### data(**必填**)
35+
36+
```js
37+
const data = [
38+
{
39+
name:'1'
40+
children: [
41+
{
42+
name: '1-1'
43+
},
44+
{
45+
name: '1-2'
46+
}
47+
]
48+
},
49+
{
50+
name: `2`
51+
}
52+
]
53+
```
54+
55+
#### columns(**必填**)
56+
57+
- label: 显示在表头的文字
58+
- key: 对应 data 的 key。treeTable 将显示相应的 value
59+
- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
60+
- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
61+
- width: 每列的宽度，为一个数字(可选)。例如`200`
62+
- align: 对齐方式 `left/center/right`
63+
- header-align: 表头对齐方式 `left/center/right`
64+
65+
```javascript
66+
const columns = [
67+
{
68+
label: 'Checkbox',
69+
checkbox: true
70+
},
71+
{
72+
label: '',
73+
key: 'id',
74+
expand: true
75+
},
76+
{
77+
label: 'Event',
78+
key: 'event',
79+
width: 200,
80+
align: 'left'
81+
},
82+
{
83+
label: 'Scope',
84+
key: 'scope'
85+
}
86+
]
87+
```
88+
89+
> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
90+
91+
```html
92+
<template slot="your key" slot-scope="{scope}">
93+
<el-tag>level: {{ scope.row._level }}</el-tag>
94+
<el-tag>expand: {{ scope.row._expand }}</el-tag>
95+
<el-tag>select: {{ scope.row._select }}</el-tag>
96+
</template>
97+
```
98+
99+
## Events
100+
101+
目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
102+
103+
```js
104+
this.$refs.TreeTable.addChild(row, data) //添加子元素
105+
this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
106+
this.$refs.TreeTable.delete(row) //删除该元素
107+
```
108+
109+
## 其他
110+
111+
如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
112+
113+
# English
114+
115+
## Brief
116+
117+
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.
118+
119+
And this component makes full use of the features of the `vue` slot to make it user-friendly.
120+
121+
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.
122+
123+
## Props
124+
125+
| Attribute | Description | Type | Default |
126+
| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
127+
| data | original display data | Array | [] |
128+
| columns | column attribute | Array | [] |
129+
| defaultExpandAll | whether to expand all nodes by default | Boolean | false |
130+
| defaultChildren | specify which node object is used as the node's subtree | String | children | |
131+
| indent | horizontal indentation of nodes in adjacent levels in pixels | Number | 50 |
132+
133+
> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
134+
135+
---
136+
137+
### Example
138+
139+
```html
140+
<tree-table :data="data" :columns="columns" border>
141+
```
142+
143+
#### data(**Required**)
144+
145+
```js
146+
const data = [
147+
{
148+
name:'1'
149+
children: [
150+
{
151+
name: '1-1'
152+
},
153+
{
154+
name: '1-2'
155+
}
156+
]
157+
},
158+
{
159+
name: `2`
160+
}
161+
]
162+
```
163+
164+
#### columns(**Required**)
165+
166+
- label: text displayed in the header
167+
- key: data.key will show in column
168+
- expand: `true` or `false`
169+
- checkbox: `true` or `false`
170+
- width: column width 。such as `200`
171+
- align: alignment `left/center/right`
172+
- header-align: alignment of the table header `left/center/right`
173+
174+
```javascript
175+
const columns = [
176+
{
177+
label: 'Checkbox',
178+
checkbox: true
179+
},
180+
{
181+
label: '',
182+
key: 'id',
183+
expand: true
184+
},
185+
{
186+
label: 'Event',
187+
key: 'event',
188+
width: 200,
189+
align: 'left'
190+
},
191+
{
192+
label: 'Scope',
193+
key: 'scope'
194+
}
195+
]
196+
```
197+
198+
> 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.
199+
200+
```html
201+
<template slot="your key" slot-scope="{scope}">
202+
<el-tag>level: {{ scope.row._level }}</el-tag>
203+
<el-tag>expand: {{ scope.row._expand }}</el-tag>
204+
<el-tag>select: {{ scope.row._select }}</el-tag>
205+
</template>
206+
```
207+
208+
## Events
209+
210+
Several methods are currently available, but only the `beta` version, which is likely to be modified later.
211+
212+
```js
213+
this.$refs.TreeTable.addChild(row, data) //Add child elements
214+
this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
215+
this.$refs.TreeTable.delete(row) //Delete the element
216+
```
217+
218+
## Other
219+
220+
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

‎src/components/TreeTable/readme.md

Lines changed: 0 additions & 99 deletions
This file was deleted.

‎src/icons/svg/tree-table.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/router/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Layout from '@/views/layout/Layout'
1010
import componentsRouter from './modules/components'
1111
import chartsRouter from './modules/charts'
1212
import tableRouter from './modules/table'
13+
import treeTableRouter from './modules/tree-table'
1314
import nestedRouter from './modules/nested'
1415

1516
/** note: sub-menu only appear when children.length>=1
@@ -162,6 +163,7 @@ export const asyncRouterMap = [
162163
chartsRouter,
163164
nestedRouter,
164165
tableRouter,
166+
treeTableRouter,
165167

166168
{
167169
path: '/example',

‎src/router/modules/table.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,6 @@ const tableRouter = {
3030
name: 'InlineEditTable',
3131
meta: { title: 'inlineEditTable' }
3232
},
33-
{
34-
path: 'tree-table',
35-
component: () => import('@/views/table/treeTable/treeTable'),
36-
name: 'TreeTableDemo',
37-
meta: { title: 'treeTable' }
38-
},
39-
{
40-
path: 'custom-tree-table',
41-
component: () => import('@/views/table/treeTable/customTreeTable'),
42-
name: 'CustomTreeTableDemo',
43-
meta: { title: 'customTreeTable' }
44-
},
4533
{
4634
path: 'complex-table',
4735
component: () => import('@/views/table/complexTable'),

‎src/router/modules/tree-table.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/** When your routing table is too long, you can split it into small modules**/
2+
3+
import Layout from '@/views/layout/Layout'
4+
5+
const treeTableRouter = {
6+
path: '/tree-table',
7+
component: Layout,
8+
redirect: '/table/complex-table',
9+
name: 'TreeTable',
10+
meta: {
11+
title: 'treeTable',
12+
icon: 'tree-table'
13+
},
14+
children: [
15+
{
16+
path: 'index',
17+
component: () => import('@/views/tree-table/index'),
18+
name: 'TreeTableDemo',
19+
meta: { title: 'treeTable' }
20+
},
21+
{
22+
path: 'custom',
23+
component: () => import('@/views/tree-table/custom'),
24+
name: 'CustomTreeTableDemo',
25+
meta: { title: 'customTreeTable' }
26+
}
27+
]
28+
}
29+
export default treeTableRouter

0 commit comments

Comments
 (0)