table.vue
3.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
<Table :columns="columns10" :data="data9"></Table>
</template>
<script>
import expandRow from '../components/tableExpand.vue';
export default {
components: { expandRow },
data () {
return {
columns10: [
{
type: 'expand',
width: 100,
title: '展',
renderHeader (h) {
return h('i', '展开')
},
render: (h, params) => {
return h(expandRow, {
props: {
row: params.row
}
})
}
},
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
}
],
data9: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
job: '数据工程师',
interest: '羽毛球',
birthday: '1991-05-14',
book: '乔布斯传',
movie: '致命魔术',
music: 'I Cry'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
job: '数据科学家',
interest: '排球',
birthday: '1989-03-18',
book: '我的奋斗',
movie: '罗马假日',
music: 'My Heart Will Go On'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
job: '数据产品经理',
interest: '网球',
birthday: '1992-01-31',
book: '赢',
movie: '乔布斯',
music: 'Don’t Cry'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
job: '数据分析师',
interest: '桌球，跑步',
birthday: '1988-7-25',
book: '红楼梦',
movie: '倩女幽魂',
music: '演员'
}
]
}
}
}
</script>