Blame view

examples/routers/table.vue 6.33 KB
2cb8a6d9   梁灏   commit Table comp...
1
  <template>
bb49347b   梁灏   fixed #2823
2
      <div>
021bbec2   梁灏   update Table Icons
3
4
5
6
7
          <Table :data="tableData1" :columns="tableColumns1" stripe></Table>
          <div style="margin: 10px;overflow: hidden">
              <div style="float: right;">
                  <Page :total="100" :current="1" @on-change="changePage"></Page>
              </div>
6136e4dd   huanghong   fixed table horiz...
8
          </div>
bb49347b   梁灏   fixed #2823
9
      </div>
2cb8a6d9   梁灏   commit Table comp...
10
11
  </template>
  <script>
2cb8a6d9   梁灏   commit Table comp...
12
      export default {
51356c2c   梁灏   fixed #658
13
14
          data () {
              return {
021bbec2   梁灏   update Table Icons
15
16
                  tableData1: this.mockTableData1(),
                  tableColumns1: [
437b8059   Sergio Crisostomo   Added Table to CS...
17
                      {
55f90d87   梁灏   fixed #1648
18
                          title: 'Name',
021bbec2   梁灏   update Table Icons
19
                          key: 'name'
9fea8e7d   huanghong   fixed ivu-table-f...
20
21
                      },
                      {
021bbec2   梁灏   update Table Icons
22
23
24
25
26
27
28
29
30
31
32
33
34
35
                          title: 'Status',
                          key: 'status',
                          render: (h, params) => {
                              const row = params.row;
                              const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red';
                              const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail';
  
                              return h('Tag', {
                                  props: {
                                      type: 'dot',
                                      color: color
                                  }
                              }, text);
                          }
9fea8e7d   huanghong   fixed ivu-table-f...
36
37
                      },
                      {
021bbec2   梁灏   update Table Icons
38
39
                          title: 'Portrayal',
                          key: 'portrayal',
9fea8e7d   huanghong   fixed ivu-table-f...
40
                          render: (h, params) => {
021bbec2   梁灏   update Table Icons
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
                              return h('Poptip', {
                                  props: {
                                      trigger: 'hover',
                                      title: params.row.portrayal.length + 'portrayals',
                                      placement: 'bottom'
                                  }
                              }, [
                                  h('Tag', params.row.portrayal.length),
                                  h('div', {
                                      slot: 'content'
                                  }, [
                                      h('ul', this.tableData1[params.index].portrayal.map(item => {
                                          return h('li', {
                                              style: {
                                                  textAlign: 'center',
                                                  padding: '4px'
                                              }
                                          }, item)
                                      }))
                                  ])
9fea8e7d   huanghong   fixed ivu-table-f...
61
62
                              ]);
                          }
9ea47cb3   梁灏   fixed Table multi...
63
64
                      },
                      {
021bbec2   梁灏   update Table Icons
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
                          title: 'People',
                          key: 'people',
                          render: (h, params) => {
                              return h('Poptip', {
                                  props: {
                                      trigger: 'hover',
                                      title: params.row.people.length + 'customers',
                                      placement: 'bottom'
                                  }
                              }, [
                                  h('Tag', params.row.people.length),
                                  h('div', {
                                      slot: 'content'
                                  }, [
                                      h('ul', this.tableData1[params.index].people.map(item => {
                                          return h('li', {
                                              style: {
                                                  textAlign: 'center',
                                                  padding: '4px'
                                              }
                                          }, item.n + ':' + item.c + 'People')
                                      }))
                                  ])
                              ]);
                          }
9ea47cb3   梁灏   fixed Table multi...
90
91
                      },
                      {
021bbec2   梁灏   update Table Icons
92
93
94
95
                          title: 'Sampling Time',
                          key: 'time',
                          render: (h, params) => {
                              return h('div', 'Almost' + params.row.time + 'days');
9ea47cb3   梁灏   fixed Table multi...
96
97
98
                          }
                      },
                      {
021bbec2   梁灏   update Table Icons
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
                          title: 'Updated Time',
                          key: 'update',
                          render: (h, params) => {
                              return h('div', this.formatDate(this.tableData1[params.index].update));
                          }
                      }
                  ]
              }
          },
          methods: {
              mockTableData1 () {
                  let data = [];
                  for (let i = 0; i < 10; i++) {
                      data.push({
                          name: 'Business' + Math.floor(Math.random () * 100 + 1),
                          status: Math.floor(Math.random () * 3 + 1),
                          portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
                          people: [
9ea47cb3   梁灏   fixed Table multi...
117
                              {
021bbec2   梁灏   update Table Icons
118
119
                                  n: 'People' + Math.floor(Math.random () * 100 + 1),
                                  c: Math.floor(Math.random () * 1000000 + 100000)
9ea47cb3   梁灏   fixed Table multi...
120
121
                              },
                              {
021bbec2   梁灏   update Table Icons
122
123
                                  n: 'People' + Math.floor(Math.random () * 100 + 1),
                                  c: Math.floor(Math.random () * 1000000 + 100000)
9ea47cb3   梁灏   fixed Table multi...
124
125
                              },
                              {
021bbec2   梁灏   update Table Icons
126
127
                                  n: 'People' + Math.floor(Math.random () * 100 + 1),
                                  c: Math.floor(Math.random () * 1000000 + 100000)
9ea47cb3   梁灏   fixed Table multi...
128
129
                              }
                          ],
021bbec2   梁灏   update Table Icons
130
131
132
133
134
                          time: Math.floor(Math.random () * 7 + 1),
                          update: new Date()
                      })
                  }
                  return data;
6136e4dd   huanghong   fixed table horiz...
135
              },
021bbec2   梁灏   update Table Icons
136
137
138
139
140
141
142
              formatDate (date) {
                  const y = date.getFullYear();
                  let m = date.getMonth() + 1;
                  m = m < 10 ? '0' + m : m;
                  let d = date.getDate();
                  d = d < 10 ? ('0' + d) : d;
                  return y + '-' + m + '-' + d;
6136e4dd   huanghong   fixed table horiz...
143
              },
021bbec2   梁灏   update Table Icons
144
145
146
              changePage () {
                  // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
                  this.tableData1 = this.mockTableData1();
6136e4dd   huanghong   fixed table horiz...
147
              }
2cb8a6d9   梁灏   commit Table comp...
148
          }
6c634aa6   梁灏   fixed #2078
149
      }
021bbec2   梁灏   update Table Icons
150
  </script>