Blame view

examples/routers/table.vue 2.86 KB
2cb8a6d9   梁灏   commit Table comp...
1
  <template>
5ee64b6d   梁灏   fixed #430
2
3
4
5
6
7
8
      <div>
          <Row>
              <i-col span="12">
                  <i-table border :content="self" :columns="columns7" :data="data6" :context="self"></i-table>
              </i-col>
          </Row>
      </div>
2cb8a6d9   梁灏   commit Table comp...
9
10
11
  </template>
  <script>
      export default {
2cb8a6d9   梁灏   commit Table comp...
12
13
          data () {
              return {
99d0429e   梁灏   update Button & T...
14
15
16
                  info: '123',
                  self: this,
                  columns7: [
2404849c   leonine   合并原作者更新
17
                      {
b89a982e   梁灏   fixed #205
18
                          title: '姓名',
99d0429e   梁灏   update Button & T...
19
20
21
22
                          key: 'name',
  //                        render (row, column, index) {
  //                            return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
  //                        }
b89a982e   梁灏   fixed #205
23
24
25
                      },
                      {
                          title: '年龄',
99d0429e   梁灏   update Button & T...
26
                          key: 'age'
b89a982e   梁灏   fixed #205
27
28
29
                      },
                      {
                          title: '地址',
99d0429e   梁灏   update Button & T...
30
31
32
33
34
35
36
37
38
                          key: 'address'
                      },
                      {
                          title: '操作',
                          key: 'action',
                          width: 150,
                          align: 'center',
                          render (row, column, index) {
                              return `<i-button type="primary" size="small" @click="show(${index})">{{ info }}查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
b89a982e   梁灏   fixed #205
39
40
41
                          }
                      }
                  ],
99d0429e   梁灏   update Button & T...
42
                  data6: [
b89a982e   梁灏   fixed #205
43
44
45
                      {
                          name: '王小明',
                          age: 18,
99d0429e   梁灏   update Button & T...
46
                          address: '北京市朝阳区芍药居'
3c38e4f7   梁灏   update Table cell
47
                      },
99d0429e   梁灏   update Button & T...
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
  //                    {
  //                        name: '张小刚',
  //                        age: 25,
  //                        address: '北京市海淀区西二旗'
  //                    },
  //                    {
  //                        name: '李小红',
  //                        age: 30,
  //                        address: '上海市浦东新区世纪大道'
  //                    },
  //                    {
  //                        name: '周小伟',
  //                        age: 26,
  //                        address: '深圳市南山区深南大道'
  //                    }
d16dce64   梁灏   fixed #193
63
                  ]
2cb8a6d9   梁灏   commit Table comp...
64
              }
99d0429e   梁灏   update Button & T...
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
          },
          computed: {
              dddfff () {
                  return this.info
              }
          },
          methods: {
              show (index) {
                  this.$Modal.info({
                      title: '用户信息',
                      content: `姓名:${this.data6[index].name}<br>年龄:${this.data6[index].age}<br>地址:${this.data6[index].address}`
                  })
              },
              remove (index) {
                  this.data6.splice(index, 1);
              }
          },
          mounted () {
              setTimeout(() => {
                  this.info = '444';
              }, 3000);
2cb8a6d9   梁灏   commit Table comp...
86
87
          }
      }
d0e206c5   梁灏   Table add content...
88
  </script>