other / mew-iview

Blame view

test/routers/table.vue 5.73 KB
Edit Raw Normal View History
2cb8a6d9   梁灏   commit Table comp... 
1
 
  <template>
43509ad8   梁灏   Table support exp... 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
      <i-button @click="down">down</i-button>
      <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 v-ref:table></i-table>
2cb8a6d9   梁灏   commit Table comp... 
17
18
19
 
  </template>
  <script>
      export default {
2cb8a6d9   梁灏   commit Table comp... 
20
21
 
          data () {
              return {
43509ad8   梁灏   Table support exp... 
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
 
                  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>`;
                          }
0f4ccf44   梁灏   release 0.9.9 
65
 
                      },
43509ad8   梁灏   Table support exp... 
66
67
68
69
 
                      show: {
                          title: '展示',
                          key: 'show',
                          width: 150,
e8ee1423   梁灏   optimize Table style 
70
 
                          sortable: true
0f4ccf44   梁灏   release 0.9.9 
71
 
                      },
43509ad8   梁灏   Table support exp... 
72
73
74
75
76
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
                      weak: {
                          title: '唤醒',
                          key: 'weak',
                          width: 150,
                          sortable: true
                      },
                      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
                      },
                      day: {
                          title: '日活跃',
                          key: 'day',
                          width: 150,
                          sortable: true
                      },
                      week: {
                          title: '周活跃',
                          key: 'week',
                          width: 150,
                          sortable: true
                      },
                      month: {
                          title: '月活跃',
                          key: 'month',
                          width: 150,
                          sortable: true
2cb8a6d9   梁灏   commit Table comp... 
131
 
                      }
43509ad8   梁灏   Table support exp... 
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
                  };
  
                  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;
              },
              down () {
                  this.$refs.table.exportCsv({
                      filename: '2132',
                      original: false
                  });
2cb8a6d9   梁灏   commit Table comp... 
151
 
              }
43509ad8   梁灏   Table support exp... 
152
153
154
 
          },
          ready () {
              this.changeTableColumns();
2cb8a6d9   梁灏   commit Table comp... 
155
156
 
          }
      }
d0e206c5   梁灏   Table add content... 
157
 
  </script>