Blame view

test/routers/table.vue 4.2 KB
2cb8a6d9   梁灏   commit Table comp...
1
  <template>
d0788ae9   梁灏   fixed #207
2
      <i-table border :content="self" :columns="columns7" :data="data6"></i-table>
1594942f   leonine   itable 添加设置默认选中行的功能
3
4
5
  
       默认选中行
       <i-table border :content="self" :columns="columns8" :data="data8"></i-table>
2cb8a6d9   梁灏   commit Table comp...
6
7
8
  </template>
  <script>
      export default {
2cb8a6d9   梁灏   commit Table comp...
9
10
          data () {
              return {
b89a982e   梁灏   fixed #205
11
                  self: this,
b89a982e   梁灏   fixed #205
12
13
14
15
16
17
18
19
20
21
                  columns7: [
                      {
                          title: '姓名',
                          key: 'name',
                          render (row, column, index) {
                              return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
                          }
                      },
                      {
                          title: '年龄',
da020a63   Rijn   Changed parameter...
22
23
24
25
26
27
28
29
30
                          key: 'age',
                          sortable: true,
                          sortMethod: function (a, b, type) {
                              if (type === 'asc') {
                                  return a < b ? 1 : -1;
                              } else if (type === 'desc') {
                                  return a > b ? 1 : -1;
                              }
                          }
b89a982e   梁灏   fixed #205
31
32
33
34
35
36
37
38
                      },
                      {
                          title: '地址',
                          key: 'address'
                      },
                      {
                          title: '操作',
                          key: 'action',
d0788ae9   梁灏   fixed #207
39
                          width: 150,
b89a982e   梁灏   fixed #205
40
41
                          align: 'center',
                          render (row, column, index) {
d0788ae9   梁灏   fixed #207
42
43
44
45
  //                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                              return `<Poptip width="250" confirm placement="left" title="您确认删除吗?" @on-ok="deleteProject(${index})">
                  <i-button size="small" type="error">删除</i-button>
                </Poptip>`
b89a982e   梁灏   fixed #205
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
                          }
                      }
                  ],
                  data6: [
                      {
                          name: '王小明',
                          age: 18,
                          address: '北京市朝阳区芍药居'
                      },
                      {
                          name: '张小刚',
                          age: 25,
                          address: '北京市海淀区西二旗'
                      },
                      {
                          name: '李小红',
                          age: 30,
                          address: '上海市浦东新区世纪大道'
                      },
                      {
                          name: '周小伟',
                          age: 26,
                          address: '深圳市南山区深南大道'
                      }
1594942f   leonine   itable 添加设置默认选中行的功能
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
                  ],
                  columns8:[
                       {
                          type: 'selection',
                          width: 60,
                          align: 'center'
                      },
                      {
                          title: '名称',
                          key: 'name'
                      },
                      {
                          title: '年龄',
                          key: 'age'
                      },
                      {
                          title: '地址',
                          key: 'address'
                      }
                  ],
                  data8:[
                       {
                          name: '王小明',
                          age: 18,
                          address: '北京市朝阳区芍药居',
                          checked:true  // 传checked 可以设置该行为默认选中状态
                      },
                      {
                          name: '张小刚',
                          age: 25,
                          address: '北京市海淀区西二旗'
                      }
d16dce64   梁灏   fixed #193
102
                  ]
2cb8a6d9   梁灏   commit Table comp...
103
              }
d0788ae9   梁灏   fixed #207
104
105
106
107
108
109
110
111
112
113
114
          },
          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...
115
116
          }
      }
d0e206c5   梁灏   Table add content...
117
  </script>