feat(table): add table trclick event, and property selectWhenClickTr

heyui · Jul 28, 2018 · fdf7c09 · fdf7c09
1 parent f33795d
commit fdf7c09
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 8 deletions.
diff --git a/doc/components/component/data/view/table.vue b/doc/components/component/data/view/table.vue
@@ -152,6 +152,13 @@
         <td>true/auto</td>
         <td>false</td>
       </tr>
+      <tr>
+        <td>selectWhenClickTr</td>
+        <td>当点击tr的时候，触发checkbox选中切换</td>
+        <td>Boolean</td>
+        <td></td>
+        <td>false</td>
+      </tr>
     </table>
 
     <h3>Table 事件</h3>
@@ -172,6 +179,10 @@
         <td>selectAll</td>
         <td>当checkbox全选的时候</td>
       </tr>
+      <tr>
+        <td>trclick</td>
+        <td>当tr被点击的时候</td>
+      </tr>
     </table>
 
     <h3>Table 方法</h3>

diff --git a/doc/components/demos/view/table4.vue b/doc/components/demos/view/table4.vue
@@ -4,7 +4,7 @@
       <button class="h-btn h-btn-s h-btn-blue"
               @click="add(datas)"><i class="h-icon-plus"></i><span>添加一行</span></button>
     </p>
-    <Table :datas="datas" :height="400" @select="onselect" checkbox>
+    <Table :datas="datas" :height="400" @select="onselect" checkbox @trclick="trClick" selectWhenClickTr>
       <TableItem title="ID" prop="id" align="center" :width="80" fixed="left"></TableItem>
       <TableItem title="年龄" prop="age" :width="150"></TableItem>
       <TableItem title="地址" prop="address" align="center" :width="150"></TableItem>
@@ -56,7 +56,10 @@ export default {
       datas.push({ id: 7, name: '添加', age: 12, address: "然后添加的" });
     },
     onselect(data) {
-      log(data);
+      log('onselect', data);
+    },
+    trClick(data) {
+      log('trClick', data);
     }
   }
 }

diff --git a/doc/components_en/component/data/view/table.vue b/doc/components_en/component/data/view/table.vue
@@ -152,6 +152,13 @@
         <td>true/auto</td>
         <td>false</td>
       </tr>
+      <tr>
+        <td>selectWhenClickTr</td>
+        <td>When clicking on tr, trigger the checkbox switch</td>
+        <td>Boolean</td>
+        <td></td>
+        <td>false</td>
+      </tr>
     </table>
 
     <h3>Table Event</h3>
@@ -166,11 +173,15 @@
       </tr>
       <tr>
         <td>select</td>
-        <td>Events that fire when the checkbox is changed</td>
+        <td>Events that fire when checkbox is changed</td>
       </tr>
       <tr>
         <td>selectAll</td>
-        <td>When the checkbox is selected</td>
+        <td>When checkbox is selected</td>
+      </tr>
+      <tr>
+        <td>trclick</td>
+        <td>When tr is clicked</td>
       </tr>
     </table>
 

diff --git a/src/components/table/table-tr.js b/src/components/table/table-tr.js
@@ -37,7 +37,16 @@ export default {
       }
     }
     return h(
-      'tr', {}, tds
+      'tr', {
+        on: {
+          click: this.clickHandler
+        },
+      }, tds
     )
+  },
+  methods: {
+    clickHandler(event) {
+      this.$emit('click', this.datas, event)
+    }
   }
 }
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
@@ -31,7 +31,7 @@
           </colgroup>
           <tbody class="h-table-tbody">
             <template v-for="(d, index) of datas">
-              <TableTr :datas="d" :key="index+update.datas" :index="index" :trIndex="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
+              <TableTr @click="triggerTrClicked" :datas="d" :key="index+update.datas" :index="index" :trIndex="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                 <td v-if="checkbox" class="h-table-td-checkbox">
                   <Checkbox v-if="fixedColumnLeft.length==0" v-model="checks" :value="d"></Checkbox>
                 </td>
@@ -55,7 +55,7 @@
           </colgroup>
           <tbody class="h-table-tbody">
             <template v-for="(d, index) of datas">
-              <TableTr :datas="d" :key="index+update.datas" :index="index" :trIndex="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
+              <TableTr @click="triggerTrClicked" :datas="d" :key="index+update.datas" :index="index" :trIndex="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                 <td v-if="checkbox" class="h-table-td-checkbox">
                 <Checkbox v-model="checks" :value="d"></Checkbox>
                 </td>
@@ -72,7 +72,7 @@
           </colgroup>
           <tbody class="h-table-tbody">
             <template v-for="(d, index) of datas">
-              <TableTr :datas="d" :key="index+update.datas" :index="index" :trIndex="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
+              <TableTr @click="triggerTrClicked" :datas="d" :key="index+update.datas" :index="index" :trIndex="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                 <slot :data="d" :index="index" v-if="$scopedSlots.default"></slot>
               </TableTr>
             </template>
@@ -141,6 +141,10 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    selectWhenClickTr: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -370,6 +374,17 @@ export default {
         }
       }
       this.computeColumns = columns;
+    },
+    triggerTrClicked(data, event) {
+      if(this.selectWhenClickTr && !utils.hasClass(event.target, 'h-checkbox-native')) {
+        let list = this.checks;
+        if (list.some(item => item == data)) {
+          list.splice(list.indexOf(data), 1);
+        } else {
+          list.push(data);
+        }
+      }
+      this.$emit('trclick', data);
     }
   },
   computed: {