Skip to content

Commit a69bdaa

Browse files
author
黄书伟
committed
实例优化
1 parent 5bdf9b0 commit a69bdaa

19 files changed

+353
-479
lines changed

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

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,30 @@
44
```html
55
<template>
66
<v-table
7-
:columns="tableConfig.columns"
8-
:table-data="tableConfig.tableData"
9-
:on-row-click="tableConfig.onRowClick"
10-
row-hover-color="#eee"
11-
row-click-color="#edf7ff"
7+
:columns="columns"
8+
:table-data="tableData"
129
></v-table>
1310
</template>
1411

1512
<script>
1613
17-
import mockData from '../../mock/tableData.js'
18-
1914
export default{
2015
data() {
2116
return {
22-
tableConfig: {
23-
tableData:[],
24-
columns: [
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: 330, titleAlign: 'center',columnAlign:'center'},
28-
{field: 'address', title: '地址', width: 308, titleAlign: 'center',columnAlign:'left'}
29-
],
30-
titleBgColor: "#e1e1e1",
31-
onRowClick(rowIndex,rowData){
32-
console.log(rowIndex);
33-
console.log(rowData);
34-
}
35-
}
17+
tableData: [
18+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
19+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
20+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
21+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
22+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
23+
],
24+
columns: [
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: 330, titleAlign: 'center',columnAlign:'center'},
28+
{field: 'address', title: '地址', width: 308, titleAlign: 'center',columnAlign:'left'}
29+
]
3630
}
37-
},
38-
created(){
39-
40-
this.tableConfig.tableData = mockData;
4131
}
4232
}
4333
</script>

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

Lines changed: 16 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,31 @@
33
```html
44
<template>
55
<v-table
6-
:width="1000"
7-
:columns="tableConfig.columns"
8-
:table-data="tableConfig.tableData"
9-
:on-row-click="tableConfig.onRowClick"
6+
:width="1000"
7+
:columns="columns"
8+
:table-data="tableData"
109
:show-vertical-border="false"
11-
row-hover-color="#eee"
12-
row-click-color="#edf7ff"
13-
:row-mouse-enter="rowMouseEnter"
14-
:row-mouse-leave="rowMouseLeave"
1510
></v-table>
1611
</template>
1712

1813
<script>
1914
20-
import mockData from '../../mock/tableData.js'
21-
2215
export default{
2316
data() {
2417
return {
25-
tableConfig: {
26-
tableData:[],
27-
columns: [
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: 330, titleAlign: 'center',columnAlign:'center'},
31-
{field: 'address', title: '地址', titleAlign: 'center',columnAlign:'left'}
32-
],
33-
titleBgColor: "#e1e1e1",
34-
onRowClick(rowIndex,rowData){
35-
console.log(rowIndex);
36-
console.log(rowData);
37-
}
38-
}
39-
}
40-
},
41-
created(){
42-
43-
this.tableConfig.tableData = mockData;
44-
},
45-
methods:{
46-
47-
rowMouseEnter(rowIndex){
48-
console.log('鼠标悬浮进入，行号：'+rowIndex);
49-
},
50-
rowMouseLeave(rowIndex){
51-
console.log('鼠标悬浮离开，行号：'+rowIndex);
18+
tableData: [
19+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
20+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
21+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
22+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
23+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
24+
],
25+
columns: [
26+
{field: 'name', title:'姓名', width: 100, titleAlign: 'center',columnAlign:'center'},
27+
{field: 'tel', title: '手机号码', width: 260, titleAlign: 'center',columnAlign:'center'},
28+
{field: 'hobby', title: '爱好', width: 330, titleAlign: 'center',columnAlign:'center'},
29+
{field: 'address', title: '地址', titleAlign: 'center',columnAlign:'left'}
30+
]
5231
}
5332
}
5433
}

‎examples/doc/table/cell-edit-advanced.md‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<v-table
77
is-horizontal-resize
88
style="width:100%"
9-
:columns="tableConfig.columns"
10-
:table-data="tableConfig.tableData"
9+
:columns="columns"
10+
:table-data="tableData"
1111
row-hover-color="#eee"
1212
row-click-color="#edf7ff"
1313
:cell-edit-formatter="cellEditFormatter"
@@ -24,13 +24,16 @@
2424

2525
<script>
2626
27-
import mockData from '../../mock/tableData.js'
28-
2927
export default{
3028
data() {
3129
return {
32-
tableConfig: {
33-
tableData:[],
30+
tableData: [
31+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
32+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
33+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
34+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
35+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
36+
],
3437
columns: [
3538
{field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center',isEdit:true,
3639
formatter: function (rowData,rowIndex,pagingIndex,field) {
@@ -40,9 +43,7 @@
4043
{field: 'tel', title: '手机号码', width: 150, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
4144
{field: 'hobby', title: '爱好', width: 150, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
4245
{field: 'address', title: '地址', width: 280, titleAlign: 'center',columnAlign:'left',isEdit:true,isResize:true}
43-
],
44-
titleBgColor: "#e1e1e1"
45-
}
46+
]
4647
}
4748
},
4849
methods:{
@@ -62,10 +63,6 @@
6263
console.log(rowData)
6364
console.log(field)
6465
}
65-
},
66-
created(){
67-
68-
this.tableConfig.tableData = mockData;
6966
}
7067
}
7168
</script>

‎examples/doc/table/cell-edit.md‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<v-table
77
is-horizontal-resize
88
style="width:100%"
9-
:columns="tableConfig.columns"
10-
:table-data="tableConfig.tableData"
9+
:columns="columns"
10+
:table-data="tableData"
1111
row-hover-color="#eee"
1212
row-click-color="#edf7ff"
1313
:cell-edit-done="cellEditDone"
@@ -16,21 +16,22 @@
1616

1717
<script>
1818
19-
import mockData from '../../mock/tableData.js'
20-
2119
export default{
2220
data() {
2321
return {
24-
tableConfig: {
25-
tableData:[],
26-
columns: [
27-
{field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
28-
{field: 'tel', title: '手机号码', width: 150, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
29-
{field: 'hobby', title: '爱好', width: 150, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
30-
{field: 'address', title: '地址', width: 280, titleAlign: 'center',columnAlign:'left',isEdit:true,isResize:true}
31-
],
32-
titleBgColor: "#e1e1e1"
33-
}
22+
tableData: [
23+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
24+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
25+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
26+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
27+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
28+
],
29+
columns: [
30+
{field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
31+
{field: 'tel', title: '手机号码', width: 150, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
32+
{field: 'hobby', title: '爱好', width: 150, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
33+
{field: 'address', title: '地址', width: 280, titleAlign: 'center',columnAlign:'left',isEdit:true,isResize:true}
34+
]
3435
}
3536
},
3637
methods:{
@@ -42,10 +43,6 @@
4243
console.log(rowData)
4344
console.log(field)
4445
}
45-
},
46-
created(){
47-
48-
this.tableConfig.tableData = mockData;
4946
}
5047
}
5148
</script>

‎examples/doc/table/cell-merge.md‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<div>
66
<v-table
77
:width="1100"
8-
:height="430"
9-
:columns="tableConfig.columns"
10-
:table-data="tableConfig.tableData"
8+
:height="300"
9+
:columns="columns"
10+
:table-data="tableData"
1111
even-bg-color="#f4f4f4"
1212
row-hover-color="#eee"
1313
row-click-color="#edf7ff"
@@ -18,34 +18,30 @@
1818

1919
<script>
2020
import Vue from 'vue'
21-
import mockData from '../../mock/tableData.js'
2221
2322
export default{
2423
name: 'frozen-title-columns',
2524
data(){
2625
return {
27-
tableConfig: {
28-
tableData: [],
29-
columns:[
30-
{field: 'name', title:'姓名', width: 150, titleAlign: 'center',columnAlign:'center', isFrozen: true},
31-
{field: 'gender', title:'性别', width: 150, titleAlign: 'center',columnAlign:'center', isFrozen: true},
32-
{field: 'tel', title: '手机号码', width: 180, titleAlign: 'center',columnAlign:'center', isFrozen: false},
33-
{field: 'birthday', title: '出生日期', width: 180, titleAlign: 'center',columnAlign:'center'},
34-
{field: 'hobby', title: '爱好', width: 380, titleAlign: 'center',columnAlign:'center'},
35-
{field: 'address', title: '地址', width: 430, titleAlign: 'center',columnAlign:'left'}
36-
]
37-
}
26+
tableData: [{"name":"赵伟","gender":"男","birthday":'1963-7-9',"height":"183","email":"[email protected]","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
27+
{"name":"李伟","gender":"男","birthday":'2003-12-7',"height":"166","email":"[email protected]","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
28+
{"name":"孙伟","gender":"女","birthday":'1993-12-7',"height":"186","email":"[email protected]","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
29+
{"name":"周伟","gender":"女","birthday":'1993-12-7',"height":"188","email":"[email protected]","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
30+
{"name":"吴伟","gender":"男","birthday":'1993-12-7',"height":"160","email":"[email protected]","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
31+
{"name":"冯伟","gender":"女","birthday":'1993-12-7',"height":"168","email":"[email protected]","tel":"133*****3793","hobby":"钢琴、书法、唱歌","address":"上海市金山区龙胜路143号一层"},
32+
{"name":"褚伟","gender":"男","birthday":'1993-12-7',"height":"170","email":"[email protected]","tel":"189*****2345","hobby":"钢琴、书法、唱歌","address":"上海市闵行区都市路2988号2楼"},],
33+
columns:[
34+
{field: 'name', title:'姓名', width: 150, titleAlign: 'center',columnAlign:'center', isFrozen: true},
35+
{field: 'gender', title:'性别', width: 150, titleAlign: 'center',columnAlign:'center', isFrozen: true},
36+
{field: 'tel', title: '手机号码', width: 180, titleAlign: 'center',columnAlign:'center', isFrozen: false},
37+
{field: 'birthday', title: '出生日期', width: 180, titleAlign: 'center',columnAlign:'center'},
38+
{field: 'hobby', title: '爱好', width: 380, titleAlign: 'center',columnAlign:'center'},
39+
{field: 'address', title: '地址', width: 430, titleAlign: 'center',columnAlign:'left'}
40+
]
3841
}
3942
},
4043
methods: {
41-
// 模拟获取数据
42-
getTableData(){
43-
var self = this
4444
45-
setTimeout(function () {
46-
self.tableConfig.tableData = mockData
47-
}, 100)
48-
},
4945
cellMerge(rowIndex,rowData,field){
5046
if (field === 'name' && rowData[field] === '李伟') {
5147
return {
@@ -74,9 +70,6 @@
7470
}
7571
}
7672
}
77-
},
78-
created(){
79-
this.getTableData()
8073
}
8174
}
8275

0 commit comments

Comments
 (0)