Skip to content

Commit 3242296

Browse files
njleonzhangnjleonzhang
committed
check in docs
1 parent 46a7295 commit 3242296

18 files changed

+1141
-0
lines changed

‎docs/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# [vue-data-tables](https://github.com/njleonzhang/vue-data-tables/)
2+
3+
> A simple and customizable, front-end pagination datatables，based on vue2 and element-ui.
4+
5+
This lib depends on the following [element-ui](http://element.eleme.io/#/en-US) components:
6+
* el-table
7+
* el-table-column
8+
* el-row
9+
* el-col
10+
* el-input
11+
* el-button
12+
* el-pagination
13+
* el-checkbox
14+
* el-checkbox-group

‎docs/_coverpage.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
![logo](_media/icon.svg)
2+
3+
# vue-data-tables <small>2.0</small>
4+
5+
> A simple and customizable, front-end pagination datatables，based on vue2 and element-ui.
6+
7+
- Simple and lightweight (~6.8kb gzipped)
8+
- Customizable and powerful
9+
- Based on element-ui
10+
11+
[GitHub](https://github.com/njleonzhang/vue-data-tables/)
12+
[Get Started](#vue-data-tables)
13+
14+
![color](#b3daff)

‎docs/_media/icon.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎docs/_media/table parts.png‎

58.2 KB
Loading

‎docs/_navbar.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
- Translations
2+
- [:cn: 中文](/zh-cn/)
3+
- [:uk: English](/en)

‎docs/_sidebar.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
- Getting Start
2+
- [Quick Start](quickstart)
3+
- [Introduce](introduce)
4+
- Guide
5+
- [Render Table](renderTable)
6+
- [Table Action](tableAction)
7+
- [Checkbox Filter](checkboxFilter)
8+
- [Search Box filter](searchBoxFilter)
9+
- [Define Action Bar](defineActionBar)
10+
- [Table Action col](tableActionCol)
11+
- [Pagination](pagination)

‎docs/checkboxFilter.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Checkbox filter
2+
> customize the checkbox filter
3+
4+
# render the checkbox filter
5+
property `checkbox-filter-def` is used to defined the checkbox filters
6+
`colProps` is used to customize the `el-col` of checkbox filter area
7+
8+
`props` indicate the property[s] of `data` to filter.
9+
10+
`def` define the checkbox items.
11+
12+
> The default filter logic is that showing the items whose `property` value is same to(included in) the selected item(s).
13+
14+
```html
15+
/*vue*/
16+
<desc>
17+
`colProps.span = 19` make table checkbox filter area occupy 19 grids.
18+
</desc>
19+
<template>
20+
<data-tables
21+
:data='data'
22+
:checkbox-filter-def="checkboxFilterDef">
23+
<el-table-column v-for="title in titles"
24+
:prop="title.prop"
25+
:label="title.label"
26+
:key="title.label"
27+
sortable="custom">
28+
</el-table-column>
29+
</data-tables>
30+
</template>
31+
32+
<script>
33+
export default {
34+
data() {
35+
return {
36+
data,
37+
titles,
38+
checkboxFilterDef: {
39+
colProps: {
40+
span: 19
41+
},
42+
props: 'flow_type_code',
43+
def: [{
44+
'code': 'repair',
45+
'name': 'Repair'
46+
}, {
47+
'code': 'help',
48+
'name': 'Help'
49+
}]
50+
}
51+
}
52+
}
53+
}
54+
</script>
55+
```
56+
57+
# custom filter function
58+
`checkboxFilterDef.filterFunction(el, filter)` is designed to customize the filter logic. parameter `el` indicate a element in data table. `filter` represent a filter object. we can leverage `props` and `vals` properties of `filter`.
59+
60+
| Property | Desc | Type | Default value |
61+
| ------------- | ------------- | --- | --- |
62+
| props | indicate property scopes of this filter | Array | - |
63+
| vals | the filter target values of this filter | Array | - |
64+
65+
> element in the table will be pass as `el` parameter to filterFunction, and if filterFunction return true, then the element will be keep in the table, if not, the element is filtered.
66+
67+
```html
68+
/*vue*/
69+
<desc>
70+
customize filter logic as you want.
71+
</desc>
72+
<template>
73+
<data-tables
74+
:data='data'
75+
:checkbox-filter-def="checkboxFilterDef">
76+
<el-table-column v-for="title in titles"
77+
:prop="title.prop"
78+
:label="title.label"
79+
:key="title.label"
80+
sortable="custom">
81+
</el-table-column>
82+
</data-tables>
83+
</template>
84+
85+
<script>
86+
export default {
87+
data() {
88+
return {
89+
data,
90+
titles,
91+
checkboxFilterDef: {
92+
def: [{
93+
'code': 'repair',
94+
'name': 'Repair'
95+
}, {
96+
'code': 'help',
97+
'name': 'Help'
98+
}],
99+
filterFunction(el, filter) {
100+
return el['flow_type_code'] === filter.vals[0]
101+
}
102+
}
103+
}
104+
}
105+
}
106+
</script>
107+
```
108+
109+
# Related properties
110+
111+
`data-tables` property
112+
113+
| Property | Desc | Type | Default value |
114+
| ------------- | ------------- | --- | --- |
115+
| checkbox-filter-def | define the checkbox filter | Object | - |
116+
117+
`checkbox-filter-def` object property
118+
119+
| Property | Desc | Type | Default value |
120+
| ------------- | ------------- | --- | --- |
121+
| colProps | [el-col property](http://element.eleme.io/#/en-US/component/layout#col-attributes) of the checkbox filter area | Object | `{span: 14}` |
122+
| def | define the checkboxItems | Array of Object | - |
123+
| filterFunction | customize the filter logic | Function | - |
124+
125+
property of object in `checkbox-filter-def.def`
126+
127+
| Property | Desc | Type | Default value |
128+
| ------------- | ------------- | --- | --- |
129+
| code | value of the checkbox represented | Object | - |
130+
| name | label of the checkbox | Object | - |

‎docs/cn/quickstart.md‎

Whitespace-only changes.

‎docs/css/compatible.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.pagination-wrap .el-pagination .el-pager{
2+
padding-left: 0;
3+
}
4+
5+
.el-table table {
6+
margin-bottom: 0;
7+
}
8+
9+
/*.el-table table td, .el-table table th {
10+
border: 0;
11+
padding: 0;
12+
}*/
13+
14+
.demo-block {
15+
margin-bottom: 30px;
16+
}
17+
18+
.markdown-section .demo-block td, .markdown-section .demo-block th {
19+
border: 0;
20+
}
21+
22+
.demo-block .el-table--border td, .demo-block .el-table--border th {
23+
border-right: 1px solid #dfe6ec;
24+
}
25+
26+
.markdown-section .demo-block p.tip, .markdown-section .demo-block tr:nth-child(2n) {
27+
background-color: white;
28+
}

‎docs/defineActionBar.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# Define action bar
2+
If default action bar can not match requirement, it can be entirely customized.
3+
4+
1. set property `show-action-bar` to false to hide default action bar
5+
2. write action bar template in `slot` `custom-tool-bar`
6+
3. leverage property `custom-filters` to filter data
7+
8+
```html
9+
/*vue*/
10+
<desc>
11+
object in `customFilters` can has 3 properties: `vals`, `props` and `filterFunction`
12+
</desc>
13+
<template>
14+
<data-tables
15+
:data='data'
16+
:show-action-bar="false"
17+
:custom-filters="customFilters">
18+
19+
<el-row slot="custom-tool-bar" style="margin-bottom: 10px">
20+
<el-col :span="5">
21+
<el-dropdown @command="handleClick">
22+
<el-button type="primary">Actions<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
23+
<el-dropdown-menu slot="dropdown">
24+
<el-dropdown-item command='new'>new</el-dropdown-item>
25+
<el-dropdown-item command='import'>import</el-dropdown-item>
26+
</el-dropdown-menu>
27+
</el-dropdown>
28+
</el-col>
29+
<el-col :span="5">
30+
<el-select v-model="customFilters[1].vals" multiple="multiple">
31+
<el-option label="维修" value="repair"></el-option>
32+
<el-option label="帮忙" value="help"></el-option>
33+
</el-select>
34+
</el-col>
35+
<el-col :span="5" :offset="9">
36+
<el-input v-model="customFilters[0].vals"/>
37+
</el-col>
38+
</el-row>
39+
40+
<el-table-column v-for="title in titles"
41+
:prop="title.prop"
42+
:label="title.label"
43+
:key="title.prop"
44+
sortable="custom">
45+
</el-table-column/>
46+
</data-tables>
47+
</template>
48+
49+
<script>
50+
export default {
51+
data() {
52+
return {
53+
data,
54+
titles,
55+
customFilters: [{
56+
vals: '',
57+
props: 'flow_type',
58+
}, {
59+
vals: []
60+
}]
61+
}
62+
},
63+
methods: {
64+
handleClick(command) {
65+
this.$message(`click drapdown button ${command}`)
66+
}
67+
}
68+
}
69+
</script>
70+
```
71+
72+
# Related properties
73+
74+
`data-tables` property
75+
76+
| Property | Desc | Type | Default value |
77+
| -- | -- | -- | -- |
78+
| show-action-bar | show or hide the default action bar | Boolean | false |
79+
| custom-filters | define customize filters | Array of Object | - |
80+
81+
`custom-filters` object property
82+
83+
| Property | Desc | Type | Default value |
84+
| ------------- | ------------- | --- | --- |
85+
| vals | target value of this filters | Array/String | - |
86+
| props | indicate property scopes of this filter | Array | - |
87+
| vals | the filter target values of this filter | Array | - |

0 commit comments

Comments
 (0)