Blame view

examples/routers/table.vue 2.94 KB
2cb8a6d9   梁灏   commit Table comp...
1
  <template>
bb49347b   梁灏   fixed #2823
2
      <div>
847c0d43   梁灏   fixed #4158
3
          <Table tooltip-theme="light" ref="currentRowTable" :columns="columns3" :data="data1" :draggable="true" @on-drag-drop="onDragDrop"></Table>
d9d1dbbd   梁灏   Table Column add ...
4
          <Button @click="handleClearCurrentRow">Clear</Button>
bb49347b   梁灏   fixed #2823
5
      </div>
2cb8a6d9   梁灏   commit Table comp...
6
7
  </template>
  <script>
2cb8a6d9   梁灏   commit Table comp...
8
      export default {
51356c2c   梁灏   fixed #658
9
10
          data () {
              return {
d9d1dbbd   梁灏   Table Column add ...
11
                  columns3: [
ceeb9361   梁灏   fixed Table bug i...
12
                      {
d9d1dbbd   梁灏   Table Column add ...
13
                          type: 'index',
bb49347b   梁灏   fixed #2823
14
                          width: 60,
d9d1dbbd   梁灏   Table Column add ...
15
16
17
18
                          align: 'center',
                          indexMethod (row) {
                              return row._index;
                          }
ceeb9361   梁灏   fixed Table bug i...
19
                      },
437b8059   Sergio Crisostomo   Added Table to CS...
20
                      {
55f90d87   梁灏   fixed #1648
21
                          title: 'Name',
ceeb9361   梁灏   fixed Table bug i...
22
                          key: 'name'
2993f4ee   梁灏   update Tab
23
24
                      },
                      {
55f90d87   梁灏   fixed #1648
25
                          title: 'Age',
bb49347b   梁灏   fixed #2823
26
                          key: 'age'
2993f4ee   梁灏   update Tab
27
28
                      },
                      {
55f90d87   梁灏   fixed #1648
29
                          title: 'Address',
8c51d57d   梁灏   Table Column add ...
30
31
                          key: 'address',
                          tooltip: true
437b8059   Sergio Crisostomo   Added Table to CS...
32
33
                      }
                  ],
bb49347b   梁灏   fixed #2823
34
                  data1: [
b142865e   梁灏   fixed #2102
35
36
37
                      {
                          name: 'John Brown',
                          age: 18,
8c51d57d   梁灏   Table Column add ...
38
                          address: '自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引,详见示例。自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引,详见示例。自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引,详见示例。',
ceeb9361   梁灏   fixed Table bug i...
39
                          date: '2016-10-03'
b142865e   梁灏   fixed #2102
40
41
42
43
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
8c51d57d   梁灏   Table Column add ...
44
                          address: 'London No. 1 Lake Park自定义渲染列,使用 Vue 的 Render 函',
ceeb9361   梁灏   fixed Table bug i...
45
                          date: '2016-10-01'
b142865e   梁灏   fixed #2102
46
47
48
49
50
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
ceeb9361   梁灏   fixed Table bug i...
51
                          date: '2016-10-02'
b142865e   梁灏   fixed #2102
52
53
54
55
56
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
ceeb9361   梁灏   fixed Table bug i...
57
                          date: '2016-10-04'
437b8059   Sergio Crisostomo   Added Table to CS...
58
                      }
ba8e03c6   梁灏   update Select che...
59
60
61
62
                  ]
              }
          },
          methods: {
d9d1dbbd   梁灏   Table Column add ...
63
64
              handleClearCurrentRow () {
                  this.$refs.currentRowTable.clearCurrentRow();
7e8e6ef8   forfire   add dragdrop for tr
65
66
              },
              onDragDrop(a,b){
442c4208   Aresn   add demo
67
68
                  console.log(a,b);
                  this.data1.splice(b,1,...this.data1.splice(a, 1 , this.data1[b]));
c5beedf8   梁灏   fixed #690
69
              }
2cb8a6d9   梁灏   commit Table comp...
70
          }
6c634aa6   梁灏   fixed #2078
71
      }
17db7df4   梁灏   fixed #1751
72
  </script>