Skip to content

Commit d7ba075

Browse files
njleonzhangnjleonzhang
committed
update readme
1 parent 3242296 commit d7ba075

File tree

3 files changed

+7
-355
lines changed

3 files changed

+7
-355
lines changed

‎Assets/desc.png‎

-286 KB
Binary file not shown.

‎README.md‎

Lines changed: 7 additions & 355 deletions
Original file line numberDiff line numberDiff line change
@@ -2,367 +2,19 @@
22

33
> vue2.0 DataTables, based on element-ui, el-table + el-pagination + custom filter and sort
44
5+
<p align="center"><a href="" target="_blank"><img width="100"src="https://njleonzhang.github.io/vue-data-tables/_media/logo.png"></a></p>
56

6-
![preview](https://rawgit.com/njleonzhang/vue-data-tables/master/Assets/desc.png)
7-
8-
## Online demo
9-
* [Demo](https://njleonzhang.github.io/vue-data-tables/)
10-
11-
* [Demo Code](https://github.com/njleonzhang/vue-data-tables/tree/master/example/docs)
12-
13-
14-
## Install ElementUI and vue-data-tables
15-
`npm install element-ui`
16-
17-
`npm install vue-data-tables`
18-
19-
## Usage
20-
1. import to your project as plugin.
21-
22-
```js
23-
import ElementUI from 'element-ui'
24-
import 'element-ui/lib/theme-default/index.css'
25-
import DataTables from 'vue-data-tables'
26-
27-
Vue.use(ElementUI)
28-
Vue.use(DataTables)
29-
```
30-
31-
If you don't want import the whole `element-ui`, you can just load corresponding components refer to `On demand` section of [element-ui doc](http://element.eleme.io/#/en-US/component/quickstart)
32-
33-
This lib depends on the following components:
34-
- el-table
35-
- el-table-column
36-
- el-row
37-
- el-col
38-
- el-input
39-
- el-button
40-
- el-pagination
41-
- el-checkbox
42-
- el-checkbox-group
43-
44-
45-
2. use in your project.
46-
47-
```html
48-
<template>
49-
<data-tables
50-
:data='tableData',
51-
:tool-bar-def='toolBarDef',
52-
:row-action-def='rowActionsDef',
53-
@row-click='rowClick'>
54-
<el-table-column prop="flow_no"
55-
label="服务编号"
56-
sortable="custom">
57-
</el-table-column>
58-
<el-table-column
59-
prop="flow_no"
60-
label="服务编号"
61-
sortable="custom">
62-
</el-table-column>
63-
</data-tables>
64-
</template>
65-
```
66-
67-
## Attributes
68-
<table>
69-
<tr>
70-
<th>Property</th>
71-
<th>Layer1 sub proptery</th>
72-
<th>Layer2 sub proptery</th>
73-
<th>Desc</th>
74-
<th>Type</th>
75-
<th>Default values</th>
76-
</tr>
77-
<tr>
78-
<td>data</td>
79-
<td></td>
80-
<td></td>
81-
<td>The data array which will be render in the table.</td>
82-
<td>Array</td>
83-
<td>-</td>
84-
</tr>
85-
<tr>
86-
<td>tableProps</td>
87-
<td></td>
88-
<td></td>
89-
<td>An object to properties to el-table. refer to <a href="http://element.eleme.io/#/en-US/component/table#table-attributes">el-table proptery</a></td>
90-
<td>Object</td>
91-
<td>-</td>
92-
</tr>
93-
<tr>
94-
<td>col-not-row-click</td>
95-
<td></td>
96-
<td></td>
97-
<td>indicated column[s] which can not trigger row click</td>
98-
<td>String | Array</td>
99-
<td>the action column</td>
100-
</tr>
101-
<tr>
102-
<td>actions-def</td>
103-
<td></td>
104-
<td></td>
105-
<td>Define the actions, which belongs to table.</td>
106-
<td>Object</td>
107-
<td>-</td>
108-
</tr>
109-
<tr>
110-
<td rowspan="6"></td>
111-
<td>colProps</td>
112-
<td></td>
113-
<td>Actions bar, checkbox and searchbox are in a <b>el-row</b> as <b>el-col</b>s.
114-
An object to properties to el-col. refer to <a href="http://element.eleme.io/#/en-US/component/layout#col-attributes">el-col proptery</a>
115-
</td>
116-
<td>Object</td>
117-
<td>-</td>
118-
</tr>
119-
<tr>
120-
<td>def</td>
121-
<td></td>
122-
<td>Define the actions</td>
123-
<td>Array</td>
124-
<td>[]</td>
125-
</tr>
126-
<tr>
127-
<td rowspan="4"></td>
128-
<td>name</td>
129-
<td>the ation button label text</td>
130-
<td>String</td>
131-
<td>-</td>
132-
</tr>
133-
<tr>
134-
<td>icon</td>
135-
<td>icon of the button</td>
136-
<td>String</td>
137-
<td>-</td>
138-
</tr>
139-
<tr>
140-
<td>buttonProps</td>
141-
<td>An object to properties to el-button. refer to <a href="http://element.eleme.io/#/en-US/component/button#attributes">el-button proptery</a></td>
142-
<td>Object</td>
143-
<td>-</td>
144-
</tr>
145-
<tr>
146-
<td>handler</td>
147-
<td>handler of the click</td>
148-
<td>Function</td>
149-
<td>-</td>
150-
</tr>
151-
<tr>
152-
<td>checkbox-filter-def</td>
153-
<td></td>
154-
<td></td>
155-
<td>Define the checkbox filter</td>
156-
<td>Object</td>
157-
<td>-</td>
158-
</tr>
159-
<tr>
160-
<td rowspan="6"></td>
161-
<td>colProps</td>
162-
<td></td>
163-
<td>Actions bar, checkbox and searchbox are in a <b>el-row</b> as <b>el-col</b>s
164-
An object to properties to el-col. refer to <a href="http://element.eleme.io/#/en-US/component/layout#col-attributes">el-col proptery</a>
165-
</td>
166-
<td>Object</td>
167-
<td>-</td>
168-
</tr>
169-
<tr>
170-
<td>props</td>
171-
<td></td>
172-
<td>Indicate proptery[s] in the data which will be used to filter data by checkbox filter.</td>
173-
<td>String | Array</td>
174-
<td>[]</td>
175-
</tr>
176-
<tr>
177-
<td>filterFunction</td>
178-
<td></td>
179-
<td>customize filter function</td>
180-
<td>Function</td>
181-
<td>-</td>
182-
</tr>
183-
<tr>
184-
<td>def</td>
185-
<td></td>
186-
<td>grid offset of checkbox</td>
187-
<td>Array</td>
188-
<td>[]</td>
189-
</tr>
190-
<tr>
191-
<td rowspan="2"></td>
192-
<td>name</td>
193-
<td>the checkbox label text</td>
194-
<td>String</td>
195-
<td>-</td>
196-
</tr>
197-
<tr>
198-
<td>code</td>
199-
<td>the value of this checkbox stands for</td>
200-
<td>String</td>
201-
<td>-</td>
202-
</tr>
203-
<tr>
204-
<td>search-def</td>
205-
<td></td>
206-
<td></td>
207-
<td>Define the search box</td>
208-
<td>Object</td>
209-
<td>-</td>
210-
</tr>
211-
<tr>
212-
<td rowspan="5"></td>
213-
<td>show</td>
214-
<td></td>
215-
<td>show or hide search box</td>
216-
<td>Boolean</td>
217-
<td>true</td>
218-
</tr>
219-
<tr>
220-
<td>colProps</td>
221-
<td></td>
222-
<td>Actions bar, checkbox and searchbox are in a <b>el-row</b> as <b>el-col</b>s
223-
An object to properties to el-col. refer to <a href="http://element.eleme.io/#/en-US/component/layout#col-attributes">el-col proptery</a>
224-
</td>
225-
<td>Object</td>
226-
<td>-</td>
227-
</tr>
228-
<tr>
229-
<td>props</td>
230-
<td></td>
231-
<td>indicate proptery[s] in the data which will be used to filter data by search box.</td>
232-
<td>Array | String</td>
233-
<td>All</td>
234-
</tr>
235-
<tr>
236-
<td>filterFunction</td>
237-
<td></td>
238-
<td>customize filter function</td>
239-
<td>Function</td>
240-
<td>-</td>
241-
</tr>
242-
<tr>
243-
<td>inputProps</td>
244-
<td></td>
245-
<td>An object to properties to el-input. refer to <a href="http://element.eleme.io/#/en-US/component/input#input-attributes">el-input proptery</a></td>
246-
<td>Object</td>
247-
<td>-</td>
248-
</tr>
249-
<tr>
250-
<td rowspan="8">actionColDef</td>
251-
<td></td>
252-
<td></td>
253-
<td>Define action column</td>
254-
<td>Object</td>
255-
<td>-</td>
256-
</tr>
257-
<tr>
258-
<td>show</td>
259-
<td></td>
260-
<td>Determine wether show action column</td>
261-
<td>Boolean</td>
262-
<td>true</td>
263-
</tr>
264-
<tr>
265-
<td>tableColProps</td>
266-
<td></td>
267-
<td>An object to pass properties to el-table-column. refer to <a href="http://element.eleme.io/#/en-US/component/table#table-column-attributes">el-button proptery</a></td>
268-
<td>Object</td>
269-
<td>- </td>
270-
</tr>
271-
<tr>
272-
<td rowspan="5">def</td>
273-
<td></td>
274-
<td>Define the actions, which belongs to row</td>
275-
<td>Array</td>
276-
<td>[]</td>
277-
</tr>
278-
<tr>
279-
<td>name</td>
280-
<td>the row action button text</td>
281-
<td>String</td>
282-
<td>-</td>
283-
</tr>
284-
<tr>
285-
<td>type</td>
286-
<td>type of the button</td>
287-
<td>String</td>
288-
<td>text</td>
289-
</tr>
290-
<tr>
291-
<td>buttonProps</td>
292-
<td>An object to properties to el-button. refer to <a href="http://element.eleme.io/#/en-US/component/button#attributes">el-button proptery</a></td>
293-
<td>Object</td>
294-
<td>-</td>
295-
</tr>
296-
<tr>
297-
<td>handler</td>
298-
<td>handler of the click</td>
299-
<td>Function</td>
300-
<td>-</td>
301-
</tr>
302-
<tr>
303-
<td>pagination-def</td>
304-
<td></td>
305-
<td></td>
306-
<td>
307-
define pagination.
308-
refer to <a href="http://element.eleme.io/#/en-US/component/pagination#attributes">el-pagination proptery</a>
309-
</td>
310-
<td>Object</td>
311-
<td>-</td>
312-
</tr>
313-
<tr>
314-
<td rowspan="4"></td>
315-
<td>layout</td>
316-
<td></td>
317-
<td></td>
318-
<td>String</td>
319-
<td>[prev, pager, next, jumper, sizes, total]</td>
320-
</tr>
321-
<tr>
322-
<td>pageSize</td>
323-
<td></td>
324-
<td></td>
325-
<td>Number</td>
326-
<td>20</td>
327-
</tr>
328-
<tr>
329-
<td>pageSizes</td>
330-
<td></td>
331-
<td></td>
332-
<td>Array</td>
333-
<td>[20, 50, 100]</td>
334-
</tr>
335-
<tr>
336-
<td>currentPage</td>
337-
<td></td>
338-
<td></td>
339-
<td>Number</td>
340-
<td>1</td>
341-
</tr>
342-
</table>
343-
344-
For details, check the [Demo](https://njleonzhang.github.io/vue-data-tables/) and [Demo Code](https://github.com/njleonzhang/vue-data-tables/tree/master/example/docs).
345-
346-
## Event
347-
| Event | Desc | params |
348-
| ---- | ---- | ---- |
349-
| row-click | Emit when row is clicked | row, event, column |
350-
| selection-change | Emit when selection is changed | currentRow, oldCurrentRow |
351-
| select | Emit when row is selected | selection |
352-
| select-all | Emit when select-all is clicked | selection |
353-
| filtered-data | Emit when filter condition changes | filteredData |
354-
355-
For details, check the [Demo](https://njleonzhang.github.io/vue-data-tables/) and [Demo Code](https://github.com/njleonzhang/vue-data-tables/tree/master/example/docs).
7+
## Documentation
8+
https://njleonzhang.github.io/vue-data-tables
3569

35710
## Dev
358-
35911
``` bash
36012
# install dependencies
361-
npm install
13+
```
14+
yarn install
15+
```
36216
36317
# serve test/play with hot reload at localhost:8080
18+
```
36419
npm run play
365-
366-
# serve docs with hot reload at localhost:8080
367-
npm run dev
36820
```

‎docs/.nojekyll‎

Whitespace-only changes.

0 commit comments

Comments
 (0)