2cb8a6d9
 梁灏
commit Table comp...
|
1
|
<template>
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">
<checkbox value="show">展示</checkbox>
<checkbox value="weak">唤醒</checkbox>
<checkbox value="signin">登录</checkbox>
<checkbox value="click">点击</checkbox>
<checkbox value="active">激活</checkbox>
<checkbox value="day7">7日留存</checkbox>
<checkbox value="day30">30日留存</checkbox>
<checkbox value="tomorrow">次日留存</checkbox>
<checkbox value="day">日活跃</checkbox>
<checkbox value="week">周活跃</checkbox>
<checkbox value="month">月活跃</checkbox>
</checkbox-group>
<i-table :content="self" :data="tableData2" :columns="tableColumns2" border></i-table>
|
|
2cb8a6d9
梁灏
commit Table comp...
|
16
17
18
|
</template>
<script>
export default {
|
|
2cb8a6d9
梁灏
commit Table comp...
|
19
20
|
data () {
return {
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
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
|
self: this,
tableData2: this.mockTableData2(),
tableColumns2: [],
tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
}
},
methods: {
mockTableData2 () {
let data = [];
function getNum() {
return Math.floor(Math.random () * 10000 + 1);
}
for (let i = 0; i < 10; i++) {
data.push({
name: '推广名称' + (i+1),
fav: 0,
show: getNum(),
weak: getNum(),
signin: getNum(),
click: getNum(),
active: getNum(),
day7: getNum(),
day30: getNum(),
tomorrow: getNum(),
day: getNum(),
week: getNum(),
month: getNum()
})
}
return data;
},
getTable2Columns () {
const table2ColumnList = {
name: {
title: '名称',
key: 'name',
fixed: 'left',
width: 200,
render (row, column, index) {
return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>
<Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>
<span>${row.name}</span>`;
}
|
|
89670198
梁灏
publish 0.9.9-rc-5
|
64
|
},
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
65
66
67
68
69
|
show: {
title: '展示',
key: 'show',
width: 150,
sortable: true
|
|
a81dc06c
梁灏
publish 0.9.9-rc-4
|
70
|
},
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
71
72
73
74
75
|
weak: {
title: '唤醒',
key: 'weak',
width: 150,
sortable: true
|
|
a81dc06c
梁灏
publish 0.9.9-rc-4
|
76
|
},
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
signin: {
title: '登录',
key: 'signin',
width: 150,
sortable: true
},
click: {
title: '点击',
key: 'click',
width: 150,
sortable: true
},
active: {
title: '激活',
key: 'active',
width: 150,
sortable: true
},
day7: {
title: '7日留存',
key: 'day7',
width: 150,
sortable: true
},
day30: {
title: '30日留存',
key: 'day30',
width: 150,
sortable: true
},
tomorrow: {
title: '次日留存',
key: 'tomorrow',
width: 150,
sortable: true
|
|
2cb8a6d9
梁灏
commit Table comp...
|
112
|
},
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
113
114
115
116
117
|
day: {
title: '日活跃',
key: 'day',
width: 150,
sortable: true
|
|
2cb8a6d9
梁灏
commit Table comp...
|
118
|
},
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
119
120
121
122
123
|
week: {
title: '周活跃',
key: 'week',
width: 150,
sortable: true
|
|
0d136465
梁灏
update Table
|
124
|
},
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
125
126
127
128
129
|
month: {
title: '月活跃',
key: 'month',
width: 150,
sortable: true
|
|
2cb8a6d9
梁灏
commit Table comp...
|
130
|
}
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
131
132
133
134
135
136
137
138
139
140
141
142
143
|
};
let data = [table2ColumnList.name];
this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
return data;
},
changeTableColumns () {
this.tableColumns2 = this.getTable2Columns();
},
toggleFav (index) {
this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
|
|
2cb8a6d9
梁灏
commit Table comp...
|
144
|
}
|
|
f2a051a1
梁灏
publish 0.9.9-rc-6
|
145
146
147
|
},
ready () {
this.changeTableColumns();
|
|
2cb8a6d9
梁灏
commit Table comp...
|
148
149
|
}
}
|
|
d0e206c5
梁灏
Table add content...
|
150
|
</script>
|
