Skip to content

Commit f725a9f

Browse files
author
黄书伟
committed
实例优化
1 parent 856048e commit f725a9f

16 files changed

+121
-280
lines changed

‎examples/comp/App.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,12 @@
2020

2121
<a class="main-wrapper-sidebar-link" href="javascript:javascript:void(0);">组件</a>
2222
<ul class="menu-sub">
23-
2423
<li>
25-
<router-link to="/pagination">Pagination 分页</router-link>
24+
<router-link to="/table">Table 表格</router-link>
2625
</li>
27-
2826
<li>
29-
<router-link to="/table">Table 表格</router-link>
27+
<router-link to="/pagination">Pagination 分页</router-link>
3028
</li>
31-
3229
</ul>
3330

3431
</li>

‎examples/doc/table/basic-no-table-width.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,10 @@
2222
tableConfig: {
2323
tableData:[],
2424
columns: [
25-
{field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center'},
26-
{field: 'gender', title: '性别', width: 80, titleAlign: 'center',columnAlign:'center'},
27-
{field: 'height', title: '身高', width: 80, titleAlign: 'center',columnAlign:'right'},
28-
{field: 'tel', title: '手机号码', width: 168, titleAlign: 'center',columnAlign:'center'},
29-
{field: 'email', title: '邮箱', width: 230, titleAlign: 'center',columnAlign:'center'},
30-
{field: 'hobby', title: '爱好', width: 180, titleAlign: 'center',columnAlign:'left'},
31-
{field: 'job', title: '职业',width: 280, titleAlign: 'center',columnAlign:'left'}
25+
{field: 'name', title:'姓名', width: 100, titleAlign: 'center',columnAlign:'center'},
26+
{field: 'tel', title: '手机号码', width: 260, titleAlign: 'center',columnAlign:'center'},
27+
{field: 'hobby', title: '爱好', width: 380, titleAlign: 'center',columnAlign:'center'},
28+
{field: 'address', title: '地址', width: 358, titleAlign: 'center',columnAlign:'left'}
3229
],
3330
titleBgColor: "#e1e1e1",
3431
onRowClick(rowIndex,rowData){

‎examples/doc/table/basic-set-table-width.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,10 @@
2525
tableConfig: {
2626
tableData:[],
2727
columns: [
28-
{field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center'},
29-
{field: 'gender', title: '性别', width: 80, titleAlign: 'center',columnAlign:'center'},
30-
{field: 'height', title: '身高', width: 80, titleAlign: 'center',columnAlign:'right'},
31-
{field: 'tel', title: '手机号码', width: 160, titleAlign: 'center',columnAlign:'center'},
32-
{field: 'email', title: '邮箱', width: 150, titleAlign: 'center',columnAlign:'center'},
33-
{field: 'hobby', title: '爱好', width: 180, titleAlign: 'center',columnAlign:'left'},
34-
{field: 'job', title: '职业', titleAlign: 'center',columnAlign:'left'}
28+
{field: 'name', title:'姓名', width: 100, titleAlign: 'center',columnAlign:'center'},
29+
{field: 'tel', title: '手机号码', width: 260, titleAlign: 'center',columnAlign:'center'},
30+
{field: 'hobby', title: '爱好', width: 380, titleAlign: 'center',columnAlign:'center'},
31+
{field: 'address', title: '地址', titleAlign: 'center',columnAlign:'left'}
3532
],
3633
titleBgColor: "#e1e1e1",
3734
onRowClick(rowIndex,rowData){

‎examples/doc/table/complex-header-fixed-column.md‎

Lines changed: 23 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<template>
55
<v-table
66
:width="1100"
7-
:height="500"
7+
:height="350"
88
even-bg-color="#f2f2f2"
99
:title-rows="tableConfig.titleRows"
1010
:columns="tableConfig.columns"
@@ -33,7 +33,6 @@
3333
tableConfig: {
3434
multipleSort: false,
3535
tableData: [],
36-
titleRows: [],
3736
columns: [
3837
{
3938
field: 'custome', width: 50, titleAlign: 'center', columnAlign: 'center',
@@ -44,71 +43,36 @@
4443
{field: 'name', width: 100, columnAlign: 'center', isFrozen: true},
4544
{field: 'gender', width: 150, columnAlign: 'center', isFrozen: true},
4645
{field: 'height', width: 150, columnAlign: 'center', isFrozen: true},
47-
{field: 'tel', width: 150, columnAlign: 'center'},
48-
{field: 'email', width: 200, columnAlign: 'center'},
49-
{field: 'hobby', width: 200, columnAlign: 'left'},
50-
{field: 'job', width: 200, columnAlign: 'left'}
51-
]
52-
}
53-
}
54-
},
55-
methods: {
56-
57-
getTitleRows(){
58-
59-
var rows = [];
60-
rows.push([
61-
{fields: ['custome'], title: '排序', titleAlign: 'center', rowspan: 2},
62-
{fields: ['name', 'gender', 'height'], title: '基础信息', titleAlign: 'center', colspan: 3},
63-
{fields: ['tel', 'email'], title: '联系方式', titleAlign: 'center', colspan: 2},
64-
{fields: ['hobby'], title: '爱好', titleAlign: 'center', rowspan: 2},
65-
{fields: ['job'], title: '职业', titleAlign: 'center', rowspan: 2}
46+
{field: 'tel', width: 190, columnAlign: 'center'},
47+
{field: 'email', width: 230, columnAlign: 'center'},
48+
{field: 'hobby', width: 230, columnAlign: 'center'},
49+
{field: 'address', width: 330, columnAlign: 'left'}
6650
],
67-
[
68-
{fields: ['name'], title: '姓名', titleAlign: 'center'},
69-
{fields: ['gender'], title: '性别', titleAlign: 'center', orderBy: 'asc'},
70-
{fields: ['height'], title: '身高', titleAlign: 'center', orderBy: 'desc'},
71-
{fields: ['tel'], title: '手机号码', titleAlign: 'center'},
72-
{fields: ['email'], title: '邮箱', titleAlign: 'center'}
73-
]);
74-
75-
var otherData = [
76-
{
77-
name1: '行业均值(算术平均)',
78-
name2: '14,400.39',
79-
name3: '8.69',
80-
name4: '2,785',
81-
name5: '50.28',
82-
name6: '11.7538'
83-
},
84-
{
85-
name1: '行业中位数',
86-
name2: '14,400.39',
87-
name3: '8.69',
88-
name4: '2,785',
89-
name5: '50.28',
90-
name6: '11.7538'
91-
},
92-
]
9351
94-
otherData.forEach(item => {
95-
rows.push([
96-
{fields: ['custome', 'name', 'gender'], title: item.name1, titleAlign: 'center', colspan: 3},
52+
titleRows: [
53+
[{fields: ['custome'], title: '排序', titleAlign: 'center', rowspan: 2},
54+
{fields: ['name', 'gender', 'height'], title: '基础信息', titleAlign: 'center', colspan: 3},
55+
{fields: ['tel', 'email'], title: '联系方式', titleAlign: 'center', colspan: 2},
56+
{fields: ['hobby','address'], title: '爱好及地址', titleAlign: 'center', rowspan: 2,colspan: 2}],
9757
98-
{fields: ['height'], title: item.name2, titleAlign: 'center', titleCellClassName: 'title-cell-class-name-test1'},
99-
{fields: ['tel'], title: item.name3, titleAlign: 'center', titleCellClassName: 'title-cell-class-name-test2'},
100-
{fields: ['email'], title: item.name4, titleAlign: 'center', titleCellClassName: 'title-cell-class-name-test2'},
101-
{fields: ['hobby'], title: item.name5, titleAlign: 'center', titleCellClassName: 'title-cell-class-name-test2'},
102-
{fields: ['job'], title: item.name6, titleAlign: 'center', titleCellClassName: 'title-cell-class-name-test2'}
103-
]);
104-
})
58+
[{fields: ['name'], title: '姓名', titleAlign: 'center'},
59+
{fields: ['gender'], title: '性别', titleAlign: 'center', orderBy: 'asc'},
60+
{fields: ['height'], title: '身高', titleAlign: 'center', orderBy: 'desc'},
61+
{fields: ['tel'], title: '手机号码', titleAlign: 'center'},
62+
{fields: ['email'], title: '邮箱', titleAlign: 'center'}],
10563
106-
return rows;
64+
[{fields: ['custome','name','gender','height'], title: '平均值', titleAlign: 'center', colspan: 4,titleCellClassName:'title-cell-class-name-test1'},
65+
{fields: ['tel'], title: '000', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
66+
{fields: ['email'], title: '111', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
67+
{fields: ['hobby'], title: '222', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
68+
{fields: ['address'], title: '333', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'}]
69+
]
70+
}
10771
}
10872
},
73+
10974
created(){
11075
111-
this.tableConfig.titleRows = this.getTitleRows();
11276
this.tableConfig.tableData = mockData;
11377
}
11478
}

‎examples/doc/table/complex-table-resize.md‎

Lines changed: 20 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<v-table
66
is-horizontal-resize
77
style="width:100%"
8-
:height="500"
8+
:height="350"
99
even-bg-color="#f2f2f2"
1010
:title-rows="tableConfig.titleRows"
1111
:columns="tableConfig.columns"
@@ -24,10 +24,8 @@
2424
data(){
2525
return {
2626
tableConfig: {
27-
2827
multipleSort: false,
2928
tableData: [],
30-
titleRows: this.getTitleRows(),
3129
columns: [
3230
{
3331
field: 'custome', width: 50, titleAlign: 'center', columnAlign: 'center',
@@ -40,65 +38,30 @@
4038
{field: 'height', width: 150, columnAlign: 'center', isFrozen: true},
4139
{field: 'tel', width: 150, columnAlign: 'center'},
4240
{field: 'email', width: 200, columnAlign: 'center'},
43-
{field: 'hobby', width: 200, columnAlign: 'left',isResize:true},
44-
{field: 'job', width: 330, columnAlign: 'left',isResize:true}
45-
]
46-
}
47-
}
48-
},
49-
50-
methods: {
51-
getTitleRows(){
52-
53-
var rows = [];
54-
rows.push([
55-
{fields: ['custome'], title: '排序', titleAlign: 'center', rowspan: 2},
56-
{fields: ['name', 'gender', 'height'], title: '基础信息', titleAlign: 'center', colspan: 3},
57-
{fields: ['tel', 'email'], title: '联系方式', titleAlign: 'center', colspan: 2},
58-
{fields: ['hobby','job'], title: '爱好', titleAlign: 'center', rowspan: 2,colspan: 2}
41+
{field: 'hobby', width: 200, columnAlign: 'center',isResize:true},
42+
{field: 'address', width: 330, columnAlign: 'left',isResize:true}
5943
],
60-
[
61-
{fields: ['name'], title: '姓名', titleAlign: 'center'},
62-
{fields: ['gender'], title: '性别', titleAlign: 'center', orderBy: 'asc'},
63-
{fields: ['height'], title: '身高', titleAlign: 'center', orderBy: 'desc'},
64-
{fields: ['tel'], title: '手机号码', titleAlign: 'center'},
65-
{fields: ['email'], title: '邮箱', titleAlign: 'center'}
66-
]);
67-
68-
var otherData = [
69-
{
70-
name1: '行业均值(算术平均)',
71-
name2: '14,400.39',
72-
name3: '8.69',
73-
name4: '2,785',
74-
name5: '50.28',
75-
name6: '11.7538'
76-
},
77-
{
78-
name1: '行业中位数',
79-
name2: '14,400.39',
80-
name3: '8.69',
81-
name4: '2,785',
82-
name5: '50.28',
83-
name6: '11.7538'
84-
},
85-
]
44+
titleRows: [
45+
[{fields: ['custome'], title: '排序', titleAlign: 'center', rowspan: 2},
46+
{fields: ['name', 'gender', 'height'], title: '基础信息', titleAlign: 'center', colspan: 3},
47+
{fields: ['tel', 'email'], title: '联系方式', titleAlign: 'center', colspan: 2},
48+
{fields: ['hobby','address'], title: '爱好及地址', titleAlign: 'center', rowspan: 2,colspan: 2}],
8649
87-
otherData.forEach(item => {
88-
rows.push([
89-
{fields: ['custome', 'name', 'gender'], title: item.name1, titleAlign: 'center', colspan: 3},
50+
[{fields: ['name'], title: '姓名', titleAlign: 'center'},
51+
{fields: ['gender'], title: '性别', titleAlign: 'center', orderBy: 'asc'},
52+
{fields: ['height'], title: '身高', titleAlign: 'center', orderBy: 'desc'},
53+
{fields: ['tel'], title: '手机号码', titleAlign: 'center'},
54+
{fields: ['email'], title: '邮箱', titleAlign: 'center'}],
9055
91-
{fields: ['height'], title: item.name2, titleAlign: 'center'},
92-
{fields: ['tel'], title: item.name3, titleAlign: 'center'},
93-
{fields: ['email'], title: item.name4, titleAlign: 'center'},
94-
{fields: ['hobby'], title: item.name5, titleAlign: 'center'},
95-
{fields: ['job'], title: item.name6, titleAlign: 'center'}
96-
]);
97-
})
98-
return rows;
56+
[{fields: ['custome','name','gender','height'], title: '平均值', titleAlign: 'center', colspan: 4,titleCellClassName:'title-cell-class-name-test1'},
57+
{fields: ['tel'], title: '000', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
58+
{fields: ['email'], title: '111', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
59+
{fields: ['hobby'], title: '222', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
60+
{fields: ['address'], title: '333', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'}]
61+
],
62+
}
9963
}
10064
},
101-
10265
created(){
10366
10467
setTimeout(function () {

‎examples/doc/table/container-resize.md‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,8 @@
3939
columns: [
4040
{field: 'name', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
4141
{field: 'gender', title: '性别', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
42-
{field: 'height', title: '身高', width: 80, titleAlign: 'center', columnAlign: 'right',isResize:true},
43-
{field: 'tel', title: '手机号码', width: 160, titleAlign: 'center', columnAlign: 'right',isResize:true},
44-
/*{field: 'email', title: '邮箱', width: 150, titleAlign: 'center', columnAlign: 'center'},
45-
{field: 'hobby', title: '爱好', width: 280, titleAlign: 'center', columnAlign: 'left',isResize:true},
46-
{field: 'job', title: '职业', width: 280, titleAlign: 'center', columnAlign: 'left',isResize:true}*/
42+
{field: 'height', title: '身高', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
43+
{field: 'tel', title: '手机号码', width: 160, titleAlign: 'center', columnAlign: 'center',isResize:true},
4744
],
4845
titleBgColor: "#e1e1e1"
4946
},
@@ -53,11 +50,8 @@
5350
columns: [
5451
{field: 'name', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
5552
{field: 'gender', title: '性别', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
56-
{field: 'height', title: '身高', width: 80, titleAlign: 'center', columnAlign: 'right',isResize:true},
57-
{field: 'tel', title: '手机号码', width: 160, titleAlign: 'center', columnAlign: 'right',isResize:true},
58-
/*{field: 'email', title: '邮箱', width: 150, titleAlign: 'center', columnAlign: 'center'},
59-
{field: 'hobby', title: '爱好', width: 280, titleAlign: 'center', columnAlign: 'left',isResize:true},
60-
{field: 'job', title: '职业', width: 280, titleAlign: 'center', columnAlign: 'left',isResize:true}*/
53+
{field: 'height', title: '身高', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
54+
{field: 'tel', title: '手机号码', width: 160, titleAlign: 'center', columnAlign: 'center',isResize:true},
6155
],
6256
titleBgColor: "#e1e1e1"
6357
},

‎examples/doc/table/custom-columns.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,11 @@
2727
return rowIndex < 3 ? '<span style="color:red;font-weight: bold;">' + (rowIndex + 1) + '</span>' : rowIndex + 1
2828
}, isFrozen: true
2929
},
30-
{field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center'},
31-
{field: 'gender', title: '性别', width: 80, titleAlign: 'center',columnAlign:'center'},
32-
{field: 'height', title: '身高', width: 80, titleAlign: 'center',columnAlign:'right'},
30+
{field: 'name', title:'姓名', width: 130, titleAlign: 'center',columnAlign:'center'},
3331
{field: 'tel', title: '手机号码', width: 160, titleAlign: 'center',columnAlign:'center'},
34-
{field: 'email', title: '邮箱', width: 150, titleAlign: 'center',columnAlign:'center'},
35-
{field: 'hobby', title: '爱好', width: 180, titleAlign: 'center',columnAlign:'left'},
36-
{field: 'job', title: '职业', width: 130, titleAlign: 'center',columnAlign:'left'},
37-
{field: 'custome-adv', title: '操作', titleAlign: 'center',columnAlign:'left',componentName:'table-operation'}
32+
{field: 'hobby', title: '爱好', width: 230, titleAlign: 'center',columnAlign:'center'},
33+
{field: 'address', title: '地址', width: 330, titleAlign: 'center',columnAlign:'left'},
34+
{field: 'custome-adv', title: '操作', titleAlign: 'center',columnAlign:'center',componentName:'table-operation'}
3835
]
3936
}
4037
}

0 commit comments

Comments
 (0)