Blame view

examples/routers/table.vue 2.5 KB
2cb8a6d9   梁灏   commit Table comp...
1
  <template>
891f61d8   梁灏   fixed #577
2
      <Table border :context="self" :columns="columns7" :data="data6"></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
                  self: this,
                  columns7: [
2404849c   leonine   合并原作者更新
10
                      {
b89a982e   梁灏   fixed #205
11
                          title: '姓名',
99d0429e   梁灏   update Button & T...
12
                          key: 'name',
891f61d8   梁灏   fixed #577
13
14
15
                          render (row, column, index) {
                              return `<div style="white-space:nowrap;"><Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker></div>`;
                          }
b89a982e   梁灏   fixed #205
16
17
18
                      },
                      {
                          title: '年龄',
99d0429e   梁灏   update Button & T...
19
                          key: 'age'
b89a982e   梁灏   fixed #205
20
21
22
                      },
                      {
                          title: '地址',
99d0429e   梁灏   update Button & T...
23
24
25
26
27
28
29
30
                          key: 'address'
                      },
                      {
                          title: '操作',
                          key: 'action',
                          width: 150,
                          align: 'center',
                          render (row, column, index) {
891f61d8   梁灏   fixed #577
31
                              return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
b89a982e   梁灏   fixed #205
32
33
34
                          }
                      }
                  ],
99d0429e   梁灏   update Button & T...
35
                  data6: [
b89a982e   梁灏   fixed #205
36
37
38
                      {
                          name: '王小明',
                          age: 18,
99d0429e   梁灏   update Button & T...
39
                          address: '北京市朝阳区芍药居'
3c38e4f7   梁灏   update Table cell
40
                      },
891f61d8   梁灏   fixed #577
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
                      {
                          name: '张小刚',
                          age: 25,
                          address: '北京市海淀区西二旗'
                      },
                      {
                          name: '李小红',
                          age: 30,
                          address: '上海市浦东新区世纪大道'
                      },
                      {
                          name: '周小伟',
                          age: 26,
                          address: '深圳市南山区深南大道'
                      }
d16dce64   梁灏   fixed #193
56
                  ]
2cb8a6d9   梁灏   commit Table comp...
57
              }
99d0429e   梁灏   update Button & T...
58
          },
99d0429e   梁灏   update Button & T...
59
60
61
62
63
64
65
66
67
68
          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);
              }
2cb8a6d9   梁灏   commit Table comp...
69
70
          }
      }
d0e206c5   梁灏   Table add content...
71
  </script>