Skip to content

Commit 2f1df32

Browse files
author
黄书伟
committed
添加实例
1 parent a946ef2 commit 2f1df32

File tree

7 files changed

+211
-71
lines changed

7 files changed

+211
-71
lines changed

‎README.md

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -30,41 +30,9 @@ Vue.component(VTable.name, VTable)
3030
Vue.component(VPagination.name, VPagination)
3131
```
3232

33-
```html
34-
<template>
35-
<v-table
36-
:width="1100"
37-
:columns="tableConfig.columns"
38-
:table-data="tableConfig.tableData"
39-
></v-table>
40-
</template>
41-
```
42-
```javascript
43-
<script>
44-
45-
export default{
46-
data() {
47-
return {
48-
tableConfig: {
49-
tableData:[
50-
{"name":"tom","gender":"男","job":"the cat"},
51-
{"name":"jerry","gender":"男","job":"the mouse"},
52-
{"name":"张飞","gender":"女","job":"勇而有义，皆万人之敌，而为之将"}
53-
],
54-
columns: [
55-
{field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center'},
56-
{field: 'gender', title: '性别', width: 80, titleAlign: 'center',columnAlign:'center'},
57-
{field: 'job', title: '职业', titleAlign: 'center',columnAlign:'left'}
58-
]
59-
}
60-
}
61-
}
62-
}
63-
</script>
64-
```
6533

66-
### 参考
67-
[饿了么ui组件](http://element.eleme.io/#/zh-CN/component/quickstart)
34+
## 效果展示
35+
![vue-easytable](./examples/images/vue-easytable.gif)
6836

6937

7038

‎examples/doc/strart.md

Lines changed: 10 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
### 介绍
3-
基于 vue2.x 的 组件。[github仓库地址](https://github.com/huangshuwei/vue-easytable)
3+
基于 vue2.x 的 table 组件
44

55

66
### 主要功能
@@ -28,41 +28,16 @@ Vue.component(VTable.name, VTable)
2828
Vue.component(VPagination.name, VPagination)
2929
```
3030

31-
```html
32-
<template>
33-
<v-table
34-
:width="1100"
35-
:columns="tableConfig.columns"
36-
:table-data="tableConfig.tableData"
37-
></v-table>
38-
</template>
39-
```
40-
```javascript
41-
<script>
42-
43-
export default{
44-
data() {
45-
return {
46-
tableConfig: {
47-
tableData:[
48-
{"name":"tom","gender":"男","job":"the cat"},
49-
{"name":"jerry","gender":"男","job":"the mouse"},
50-
{"name":"张飞","gender":"女","job":"勇而有义，皆万人之敌，而为之将"}
51-
],
52-
columns: [
53-
{field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center'},
54-
{field: 'gender', title: '性别', width: 80, titleAlign: 'center',columnAlign:'center'},
55-
{field: 'job', title: '职业', titleAlign: 'center',columnAlign:'left'}
56-
]
57-
}
58-
}
59-
}
60-
}
61-
</script>
62-
```
31+
### 效果展示
32+
![vue-easytable](../images/vue-easytable.gif)
33+
34+
### github地址
35+
36+
[https://github.com/huangshuwei/vue-easytable](https://github.com/huangshuwei/vue-easytable)
37+
38+
### 更新日志
39+
[https://github.com/huangshuwei/vue-easytable/releases](https://github.com/huangshuwei/vue-easytable/releases)
6340

64-
### 参考
65-
[饿了么ui组件](http://element.eleme.io/#/zh-CN/component/quickstart)
6641

6742

6843

‎examples/doc/table/combinedPaging.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
:::demo 结合分页组件的table实例
2+
```html
3+
<template>
4+
<div>
5+
<v-table
6+
:multiple-sort="false"
7+
is-horizontal-resize
8+
style="width:100%"
9+
:height="350"
10+
even-bg-color="#f2f2f2"
11+
:title-rows="tableConfig.titleRows"
12+
:columns="tableConfig.columns"
13+
:table-data="tableConfig.tableData"
14+
row-hover-color="#eee"
15+
row-click-color="#edf7ff"
16+
@sort-change="sortChange"
17+
:paging-index="(pageIndex-1)*pageSize"
18+
></v-table>
19+
20+
<div class="mt30 mb20 bold"></div>
21+
<v-pagination @page-change="pageChange" @page-size-change="pageSizeChange" :total="50" :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"></v-pagination>
22+
</div>
23+
</div>
24+
</template>
25+
26+
<style>
27+
.title-cell-class-name-test1 {
28+
background-color: #2db7f5;
29+
color:#fff;
30+
}
31+
.title-cell-class-name-test2 {
32+
background-color: #f60;
33+
color:#fff;
34+
}
35+
</style>
36+
37+
<script>
38+
39+
import tableDate from '../../mock/tableData2.js'
40+
41+
export default{
42+
data(){
43+
return {
44+
pageIndex:1,
45+
pageSize:10,
46+
tableConfig: {
47+
multipleSort: false,
48+
tableData: [],
49+
columns: [
50+
{
51+
field: 'custome', width: 50, titleAlign: 'center', columnAlign: 'center',
52+
formatter: function (rowData, index,pagingIndex) {
53+
var currentIndex = index+pagingIndex;
54+
return currentIndex < 3 ? '<span style="color:red;font-weight: bold;">' + (currentIndex + 1) + '</span>' : currentIndex + 1
55+
}, isFrozen: true
56+
},
57+
{field: 'name', width: 100, columnAlign: 'center', isFrozen: true},
58+
{field: 'height', width: 150, columnAlign: 'center', isFrozen: true},
59+
{field: 'gender', width: 100, columnAlign: 'center', isFrozen: false,isResize:true},
60+
61+
{field: 'address', width: 350, columnAlign: 'left',isResize:true},
62+
{field: 'hobby', width: 230, columnAlign: 'center',isResize:true}
63+
64+
],
65+
titleRows: [
66+
[{fields: ['custome'], title: '排序', titleAlign: 'center', rowspan: 2},
67+
{fields: ['name', 'height'], title: '基础信息', titleAlign: 'center', colspan: 2},
68+
{fields: ['gender','address','hobby'], title: '用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;息', titleAlign: 'center', colspan: 3}],
69+
70+
[{fields: ['name'], title: '姓名', titleAlign: 'center'},
71+
{fields: ['height'], title: '身高', titleAlign: 'center', orderBy: ''},
72+
{fields: ['gender'], title: '性别', titleAlign: 'center'},
73+
{fields: ['address'], title: '住址', titleAlign: 'center'},
74+
{fields: ['hobby'], title: '爱好', titleAlign: 'center'}
75+
],
76+
77+
[{fields: ['custome','name','height'], title: '平均值', titleAlign: 'center', colspan: 3,titleCellClassName:'title-cell-class-name-test1'},
78+
{fields: ['gender'], title: '111', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
79+
{fields: ['address'], title: '222', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
80+
{fields: ['hobby'], title: '333', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
81+
]
82+
],
83+
}
84+
}
85+
},
86+
methods:{
87+
getTableData(){
88+
89+
this.tableConfig.tableData = tableDate.slice((this.pageIndex-1)*this.pageSize,(this.pageIndex)*this.pageSize)
90+
},
91+
pageChange(pageIndex){
92+
93+
this.pageIndex = pageIndex;
94+
this.getTableData();
95+
console.log(pageIndex)
96+
},
97+
pageSizeChange(pageSize){
98+
99+
this.pageIndex = 1;
100+
this.pageSize = pageSize;
101+
this.getTableData();
102+
},
103+
sortChange(params){
104+
105+
if (params.height.length > 0){
106+
107+
this.tableConfig.tableData.sort(function (a, b) {
108+
109+
if (params.height === 'asc'){
110+
111+
return a.height - b.height;
112+
}else if(params.height === 'desc'){
113+
114+
return b.height - a.height;
115+
}else{
116+
117+
return 0;
118+
}
119+
});
120+
}
121+
},
122+
},
123+
created(){
124+
this.getTableData();
125+
}
126+
}
127+
</script>
128+
```
129+
:::

‎examples/doc/table/main.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,11 @@
110110

111111
</div>
112112

113+
<div class="mt30 mb30">
114+
<h3>结合分页的完整实例</h3>
115+
<combined-paging></combined-paging>
116+
</div>
117+
113118
<!--api-->
114119
<api></api>
115120
</div>
@@ -138,6 +143,8 @@
138143
import customSetLoadingAndErrorContent from './custom-set-loading-and-error-content.md'
139144
import setLoadingAndErrorContent from './set-loading-and-error-content.md'
140145
146+
import combinedPaging from './combinedPaging.md'
147+
141148
142149
import api from './api.md'
143150
@@ -164,7 +171,7 @@
164171
setLoadingAndErrorContent,
165172
customSetLoadingAndErrorContent,
166173
167-
174+
combinedPaging,
168175
169176
api
170177
},

‎examples/images/vue-easytable.gif

760 KB
Loading

0 commit comments

Comments
 (0)