Skip to content

Commit eb5352a

Browse files
author
黄书伟
committed
实例补全
1 parent 2554b6c commit eb5352a

File tree

3 files changed

+163
-3
lines changed

3 files changed

+163
-3
lines changed

examples/doc/table/footer-summary.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@
4242
],
4343
columns: [
4444
{field: 'name',title: '姓名',width: 100,titleAlign: 'center',columnAlign: 'center',isFrozen: true},
45-
{field: 'amount1',title: '数值1',width: 260,titleAlign: 'center',columnAlign: 'center',isResize: true},
46-
{field: 'amount2',title: '数值2',width: 330,titleAlign: 'center',columnAlign: 'center',isResize: true},
47-
{field: 'amount3',title: '数值3',width: 308,titleAlign: 'center',columnAlign: 'left',isResize: true}
45+
{field: 'amount1',title: '数值1',width: 200,titleAlign: 'center',columnAlign: 'center',isResize: true},
46+
{field: 'amount2',title: '数值2',width: 230,titleAlign: 'center',columnAlign: 'center',isResize: true},
47+
{field: 'amount3',title: '数值3',width: 208,titleAlign: 'center',columnAlign: 'left',isResize: true}
4848
],
4949
footer: []
5050
/* 下面的数据结构
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div>
3+
4+
5+
<v-table
6+
is-horizontal-resize
7+
style="width:65%"
8+
:columns="columns"
9+
:table-data="tableData"
10+
row-hover-color="#eee"
11+
row-click-color="#edf7ff"
12+
odd-bg-color="#61abf5"
13+
table-bg-color="orange"
14+
></v-table>
15+
16+
<!-- <table class="tableInfo" style="width:1000px;">
17+
<tr v-for="data in tableData">
18+
<td style="width: 100px;height: 100px" v-for="col in columns">{{data[col]}}</td>
19+
</tr>
20+
</table>-->
21+
</div>
22+
</template>
23+
24+
<style>
25+
26+
.tableInfo td{
27+
28+
border:1px solid #666;
29+
}
30+
31+
</style>
32+
33+
<script>
34+
35+
import Vue from 'vue'
36+
37+
export default{
38+
data() {
39+
return {
40+
tableData: [],
41+
columns: [
42+
/* {width: 60, titleAlign: 'center',columnAlign:'center',type: 'selection'},*/
43+
{field: 'name', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
44+
{field: 'tel', title: '手机号码', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
45+
{field: 'hobby', title: '爱好', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
46+
{field: 'address', title: '地址', width: 280, titleAlign: 'center', columnAlign: 'left',isResize:true},
47+
/*{field: 'custome-adv', title: '操作',width: 200, titleAlign: 'center',columnAlign:'center',componentName:'table-operation2',isResize:true}*/
48+
]
49+
}
50+
},
51+
52+
created(){
53+
54+
let data = [];
55+
56+
for(var i=0;i<10000;i++){
57+
58+
data.push({name:''+i,tel:'138183887'+i,hobby:'钢琴、书法、唱歌'+i,address:'上海市黄浦区金陵东路569号17楼'+i});
59+
}
60+
61+
this.tableData = data;
62+
}
63+
}
64+
65+
// 自定义列组件
66+
Vue.component('table-operation2',{
67+
template:`<span>
68+
<a href="" @click.stop.prevent="update(rowData,index)">编辑</a>&nbsp;
69+
<a href="" @click.stop.prevent="deleteRow(rowData,index)">删除</a>
70+
</span>`,
71+
props:{
72+
rowData:{
73+
type:Object
74+
},
75+
field:{
76+
type:String
77+
},
78+
index:{
79+
type:Number
80+
}
81+
},
82+
methods:{
83+
update(){
84+
85+
// 参数根据业务场景随意构造
86+
let params = {type:'edit',index:this.index,rowData:this.rowData};
87+
this.$emit('on-custom-comp',params);
88+
},
89+
90+
deleteRow(){
91+
92+
// 参数根据业务场景随意构造
93+
let params = {type:'delete',index:this.index};
94+
this.$emit('on-custom-comp',params);
95+
96+
}
97+
}
98+
})
99+
</script>
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<v-table
3+
is-horizontal-resize
4+
is-vertical-resize
5+
6+
style="width:100%"
7+
:columns="columns"
8+
:table-data="tableData"
9+
row-hover-color="#eee"
10+
row-click-color="#edf7ff"
11+
></v-table>
12+
</template>
13+
14+
<script>
15+
16+
export default{
17+
data() {
18+
return {
19+
tableData: [
20+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
21+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
22+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
23+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
24+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
25+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
26+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
27+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
28+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
29+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
30+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
31+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
32+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
33+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
34+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
35+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
36+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
37+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
38+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
39+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
40+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
41+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
42+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
43+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
44+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
45+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
46+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
47+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
48+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
49+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
50+
],
51+
columns: [
52+
/*,isFrozen:true*/
53+
{field: 'name', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
54+
{field: 'tel', title: '手机号码', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
55+
{field: 'hobby', title: '爱好', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
56+
{field: 'address', title: '地址', width: 280, titleAlign: 'center', columnAlign: 'right',isResize:true}
57+
]
58+
}
59+
}
60+
}
61+
</script>

0 commit comments

Comments
 (0)