Skip to content

Commit 3db0b03

Browse files
njleonzhangnjleonzhang
committed
1. add new proptery action-col-label
2. add english doc
1 parent 692c65e commit 3db0b03

File tree

10 files changed

+1224
-321
lines changed

10 files changed

+1224
-321
lines changed

‎README.md

Lines changed: 261 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,267 @@
4949
```
5050

5151
## Attributes
52-
| Property | Desc | Type | default values |
53-
|------------- | ----- |---------------------- | ----- |
54-
| data | The data array which will be render in the table.| Array | - |
55-
| actions-def | Define the table actions. | Object | `{ def: [], width: 5, offset: 0 }` |
56-
| checkbox-filter-def | Define checkbox filter | Object | `{ props: undefined, def: [], width: 14, offset: 0, filterFunction: undefined}` |
57-
| row-action-def | Define actions of every row | Array | - |
58-
| search-def | Define search bar | Object | `{show: true, props: undefined, filterFunction: undefined, width: 5, offset: 0}` |
59-
| action-col-width | Define min width of action column | Object | - |
60-
| has-action-col | Determine wether show action column | Boolean | true |
61-
| col-not-row-click | Indicate the columns which do not trigger row-click | Array | the action column |
52+
53+
<table>
54+
<tr>
55+
<th>Property</th>
56+
<th>layer1 sub proptery</th>
57+
<th>layer2 sub proptery</th>
58+
<th>Desc</th>
59+
<th>Type</th>
60+
<th>Default values</th>
61+
</tr>
62+
<tr>
63+
<td>data</td>
64+
<td></td>
65+
<td></td>
66+
<td>The data array which will be render in the table.</td>
67+
<td>Array</td>
68+
<td>-</td>
69+
</tr>
70+
<tr>
71+
<td>actions-def</td>
72+
<td></td>
73+
<td></td>
74+
<td>Define the actions, which belongs to table.</td>
75+
<td>Object</td>
76+
<td>-</td>
77+
</tr>
78+
<tr>
79+
<td rowspan="6"></td>
80+
<td>width</td>
81+
<td></td>
82+
<td>grid(24 grids) width of actions bar. actions bar, checkbox and searchbox are in a <b>el-row</b> as <b>el-col</b>s</td>
83+
<td>Number</td>
84+
<td>5</td>
85+
</tr>
86+
<tr>
87+
<td>offset</td>
88+
<td></td>
89+
<td>offset of actions bar</td>
90+
<td>Number</td>
91+
<td>0</td>
92+
</tr>
93+
<tr>
94+
<td>def</td>
95+
<td></td>
96+
<td>Define the actions</td>
97+
<td>Array</td>
98+
<td>[]</td>
99+
</tr>
100+
<tr>
101+
<td rowspan="3"></td>
102+
<td>name</td>
103+
<td>the ation button label text</td>
104+
<td>String</td>
105+
<td>-</td>
106+
</tr>
107+
<tr>
108+
<td>icon</td>
109+
<td>icon of the button</td>
110+
<td>String</td>
111+
<td>-</td>
112+
</tr>
113+
<tr>
114+
<td>handler</td>
115+
<td>handler of the click</td>
116+
<td>Function</td>
117+
<td>-</td>
118+
</tr>
119+
<tr>
120+
<td>checkbox-filter-def</td>
121+
<td></td>
122+
<td></td>
123+
<td>Define the checkbox filter</td>
124+
<td>Object</td>
125+
<td>-</td>
126+
</tr>
127+
<tr>
128+
<td rowspan="7"></td>
129+
<td>width</td>
130+
<td></td>
131+
<td>grid width of checkbox</td>
132+
<td>Number</td>
133+
<td>14</td>
134+
</tr>
135+
<tr>
136+
<td>offset</td>
137+
<td></td>
138+
<td>grid offset of checkbox</td>
139+
<td>Number</td>
140+
<td>0</td>
141+
</tr>
142+
<tr>
143+
<td>props</td>
144+
<td></td>
145+
<td>Indicate proptery[s] in the data which will be used to filter data by checkbox filter.</td>
146+
<td>String | Array</td>
147+
<td>[]</td>
148+
</tr>
149+
<tr>
150+
<td>filterFunction</td>
151+
<td></td>
152+
<td>customize filter function</td>
153+
<td>Function</td>
154+
<td>-</td>
155+
</tr>
156+
<tr>
157+
<td>def</td>
158+
<td></td>
159+
<td>grid offset of checkbox</td>
160+
<td>Array</td>
161+
<td>[]</td>
162+
</tr>
163+
<tr>
164+
<td rowspan="2"></td>
165+
<td>name</td>
166+
<td>the checkbox label text</td>
167+
<td>String</td>
168+
<td>-</td>
169+
</tr>
170+
<tr>
171+
<td>code</td>
172+
<td>the value of this checkbox stands for</td>
173+
<td>String</td>
174+
<td>-</td>
175+
</tr>
176+
<tr>
177+
<td>search-def</td>
178+
<td></td>
179+
<td></td>
180+
<td>Define the search box</td>
181+
<td>Object</td>
182+
<td>-</td>
183+
</tr>
184+
<tr>
185+
<td rowspan="5"></td>
186+
<td>show</td>
187+
<td></td>
188+
<td>show or hide search box</td>
189+
<td>Boolean</td>
190+
<td>true</td>
191+
</tr>
192+
<tr>
193+
<td>props</td>
194+
<td></td>
195+
<td>indicate proptery[s] in the data which will be used to filter data by search box.</td>
196+
<td>Array | String</td>
197+
<td>All</td>
198+
</tr>
199+
<tr>
200+
<td>width</td>
201+
<td></td>
202+
<td>grid width of search box</td>
203+
<td>Number</td>
204+
<td>5</td>
205+
</tr>
206+
<tr>
207+
<td>offset</td>
208+
<td></td>
209+
<td>grid offset of search box</td>
210+
<td>Number</td>
211+
<td>0</td>
212+
</tr>
213+
<tr>
214+
<td>filterFunction</td>
215+
<td></td>
216+
<td>customize filter function</td>
217+
<td>Function</td>
218+
<td>-</td>
219+
</tr>
220+
<tr>
221+
<td>row-action-def</td>
222+
<td></td>
223+
<td></td>
224+
<td>Define the actions, which belongs to row</td>
225+
<td>Array</td>
226+
<td>[]</td>
227+
</tr>
228+
<tr>
229+
<td rowspan="2"></td>
230+
<td>name</td>
231+
<td></td>
232+
<td>the row action button text</td>
233+
<td>String</td>
234+
<td>-</td>
235+
</tr>
236+
<tr>
237+
<td>handler</td>
238+
<td></td>
239+
<td>handler of the click</td>
240+
<td>Function</td>
241+
<td>-</td>
242+
</tr>
243+
<tr>
244+
<td>action-col-width</td>
245+
<td></td>
246+
<td></td>
247+
<td>Define the min-width of the action column. unit: px.</td>
248+
<td>String</td>
249+
<td>-</td>
250+
</tr>
251+
<tr>
252+
<td>col-not-row-click</td>
253+
<td></td>
254+
<td></td>
255+
<td>indicated column[s] which can not trigger row click</td>
256+
<td>String | Array</td>
257+
<td>the action column</td>
258+
</tr>
259+
<tr>
260+
<td>has-action-col</td>
261+
<td></td>
262+
<td></td>
263+
<td>Determine wether show action column</td>
264+
<td>Boolean</td>
265+
<td>true</td>
266+
</tr>
267+
<tr>
268+
<td>action-col-label</td>
269+
<td></td>
270+
<td></td>
271+
<td>indicated the header text of the action column</td>
272+
<td>String</td>
273+
<td>"操作"</td>
274+
</tr>
275+
<tr>
276+
<td>pagination-def</td>
277+
<td></td>
278+
<td></td>
279+
<td>define pagination.</td>
280+
<td>Object</td>
281+
<td></td>
282+
</tr>
283+
<tr>
284+
<td rowspan="4"></td>
285+
<td>layout</td>
286+
<td></td>
287+
<td></td>
288+
<td>String</td>
289+
<td>[prev, pager, next, jumper, sizes, total]</td>
290+
</tr>
291+
<tr>
292+
<td>pageSize</td>
293+
<td></td>
294+
<td>refer to<a href="http://element.eleme.io/#/zh-CN/component/pagination">Elmeme Doc</a></td>
295+
<td>Number</td>
296+
<td>20</td>
297+
</tr>
298+
<tr>
299+
<td>pageSizes</td>
300+
<td></td>
301+
<td>refer to<a href="http://element.eleme.io/#/zh-CN/component/pagination">Elmeme Doc</a></td>
302+
<td>Array</td>
303+
<td>[20, 50, 100]</td>
304+
</tr>
305+
<tr>
306+
<td>currentPage</td>
307+
<td></td>
308+
<td>refer to<a href="http://element.eleme.io/#/zh-CN/component/pagination">Elmeme Doc</a></td>
309+
<td>Number</td>
310+
<td>1</td>
311+
</tr>
312+
</table>
62313

63314
For details, check the [Demo](https://njleonzhang.github.io/vue-data-tables/) and [Demo Code](https://github.com/njleonzhang/vue-data-tables/blob/master/example/App.vue).
64315

0 commit comments

Comments
 (0)