search

mannyyang / vuetable-3

data table simplify! -- datatable component for Vue 2.x. An updated fork of the one built by ratiw as that seemed to be unmaintained. See documentation at
https://mannyyang.github.io/vuetable-3/
MIT License
23 stars 4 forks source link

Click events on slot-fields #6

Closed kulmann closed 4 years ago

kulmann commented 4 years ago

Hey, thanks for taking care of vuetable!

I don't get why the <td> for slot fields doesn't have all the events that the regular columns have. Specifically I need the cell-clicked event on slot fields, so that I can ignore the event in an actions field, while I want the other fields to trigger a route change.

Regular cell has it: https://github.com/mannyyang/vuetable-3/blob/31e3d8efcac7f1da2c0eef4a749b09f44898b06a/src/components/Vuetable.vue#L93

Slot cell doesn't have it: https://github.com/mannyyang/vuetable-3/blob/31e3d8efcac7f1da2c0eef4a749b09f44898b06a/src/components/Vuetable.vue#L74

If you agree that the click events should be there on slot columns I'd be happy to provide a pull request.

kulmann commented 4 years ago

One reason I could think of is, that the slot content might have it's own events. But since you can just choose to ignore the cell-clicked event on the table if you know that your slot has it's own event handling, it would still be good to have the chance to react to that event. As of now it's just not there.

mannyyang commented 4 years ago

Hey @kulmann, sorry I took so long to response, but feel free to create a PR. Thanks!

kulmann commented 4 years ago

Hey, I just realized that the project I'm working on was using the latest stable release of vuetable-2, i.e. 1.7.5. Seems that either the next branch or your changes have diverged from that in a way that requires too many changes in my project.

I would have committed the following, which works on top of 1.7.5. It should work here as well, I suppose. But still, I won't submit a PR without testing. Please feel free to include this if needed.

diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
index 4301ad7..23a7e08 100644
--- a/src/components/Vuetable.vue
+++ b/src/components/Vuetable.vue
@@ -75,6 +75,13 @@
                       :class="bodyClass('vuetable-slot', field)"
                       :key="fieldIndex"
                       :style="{ width: field.width }"
+                      @click="onCellClicked(item, itemIndex, field, $event)"
+                      @dblclick="
+                        onCellDoubleClicked(item, itemIndex, field, $event)
+                      "
+                      @contextmenu="
+                        onCellRightClicked(item, itemIndex, field, $event)
+                      "
                     >
                       <slot
                         :name="field.name"
mannyyang commented 4 years ago

will do, thanks!