Added click and dblclick events to table

Rijn
1 parent 2b67801d
Showing 3 changed files with 35 additions and 5 deletions Show diff stats
src/components/table/table-body.vue
src/components/table/table.vue
test/routers/table.vue
@@ -9,7 +9,8 @@
                 :class="rowClasses(row._index)"
                 @mouseenter.stop="handleMouseIn(row._index)"
                 @mouseleave.stop="handleMouseOut(row._index)"
-                @click.stop="highlightCurrentRow(row._index)">
+                @click.stop="clickCurrentRow(row._index)"
+                @dblclick.stop="dblclickCurrentRow(row._index)">
                 <td v-for="column in columns" :class="alignCls(column)">
                     <Cell
                         :fixed="fixed"
@@ -66,8 +67,11 @@
             handleMouseOut (_index) {
                 this.$parent.handleMouseOut(_index);
             },
-            highlightCurrentRow (_index) {
-                this.$parent.highlightCurrentRow(_index);
+            clickCurrentRow (_index) {
+                this.$parent.clickCurrentRow(_index);
+            },
+            dblclickCurrentRow (_index) {
+                this.$parent.dblclickCurrentRow(_index);
             }
         }
     };
@@ -297,6 +297,14 @@
                 const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
                 this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[_index])), oldData);
             },
+            clickCurrentRow (_index) {
+                this.highlightCurrentRow (_index);
+                this.$emit('on-click', JSON.parse(JSON.stringify(this.data[_index])));
+            },
+            dblclickCurrentRow (_index) {
+                this.highlightCurrentRow (_index);
+                this.$emit('on-dblclick', JSON.parse(JSON.stringify(this.data[_index])));
+            },
             getSelection () {
                 let selectionIndexes = [];
                 for (let i in this.objData) {
 <template>
     <i-button @click="changeFilter">改变filter</i-button>
+    <span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>
     <Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
-    <i-table border :columns="columns6" :data="data5"></i-table>
+    <i-table
+      border
+      :columns="columns6"
+      :data="data5"
+      :highlight-row="true"
+      @on-current-change="onCurrentChange"
+      @on-dblclick="onDblclick">
+    </i-table>
 </template>
 <script>
     export default {
@@ -99,7 +107,8 @@
                        date: '2016-10-04',
                        longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
                    }
-                ]
+                ],
+                currentRow: null
             }
         },
         methods: {
@@ -113,6 +122,15 @@
             },
             switchCellEllipsis (status) {
                 this.columns6[5].ellipsis = status
+            },
+            onClick (data) {
+                window.alert('Click ' + data.name)
+            },
+            onCurrentChange (data) {
+                this.currentRow = data
+            },
+            onDblclick (data) {
+                window.alert('Double Click ' + data.name)
             }
         }
     }