Blame view

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