Blame view

examples/routers/table.vue 2.73 KB
2cb8a6d9   梁灏   commit Table comp...
1
  <template>
99d0429e   梁灏   update Button & T...
2
      <i-table border :content="self" :columns="columns7" :data="data6"></i-table>
2cb8a6d9   梁灏   commit Table comp...
3
4
5
  </template>
  <script>
      export default {
2cb8a6d9   梁灏   commit Table comp...
6
7
          data () {
              return {
99d0429e   梁灏   update Button & T...
8
9
10
                  info: '123',
                  self: this,
                  columns7: [
2404849c   leonine   合并原作者更新
11
                      {
b89a982e   梁灏   fixed #205
12
                          title: '姓名',
99d0429e   梁灏   update Button & T...
13
14
15
16
                          key: 'name',
  //                        render (row, column, index) {
  //                            return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
  //                        }
b89a982e   梁灏   fixed #205
17
18
19
                      },
                      {
                          title: '年龄',
99d0429e   梁灏   update Button & T...
20
                          key: 'age'
b89a982e   梁灏   fixed #205
21
22
23
                      },
                      {
                          title: '地址',
99d0429e   梁灏   update Button & T...
24
25
26
27
28
29
30
31
32
                          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
33
34
35
                          }
                      }
                  ],
99d0429e   梁灏   update Button & T...
36
                  data6: [
b89a982e   梁灏   fixed #205
37
38
39
                      {
                          name: '王小明',
                          age: 18,
99d0429e   梁灏   update Button & T...
40
                          address: '北京市朝阳区芍药居'
3c38e4f7   梁灏   update Table cell
41
                      },
99d0429e   梁灏   update Button & T...
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  //                    {
  //                        name: '张小刚',
  //                        age: 25,
  //                        address: '北京市海淀区西二旗'
  //                    },
  //                    {
  //                        name: '李小红',
  //                        age: 30,
  //                        address: '上海市浦东新区世纪大道'
  //                    },
  //                    {
  //                        name: '周小伟',
  //                        age: 26,
  //                        address: '深圳市南山区深南大道'
  //                    }
d16dce64   梁灏   fixed #193
57
                  ]
2cb8a6d9   梁灏   commit Table comp...
58
              }
99d0429e   梁灏   update Button & T...
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
          },
          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...
80
81
          }
      }
d0e206c5   梁灏   Table add content...
82
  </script>