waningflow / vue-virtual-table

vue table component of vue2
https://npmjs.com/vue-virtual-table
MIT License
105 stars 45 forks source link

Row click events? #15

Closed nockstarr closed 4 years ago

nockstarr commented 4 years ago

How would I go about handling LEFT and RIGHT click events on a row? Don't seem like 'click' or 'contextmenu' events are fired. Need access to row data when left or right clicking.

nockstarr commented 4 years ago

Im far from a js/vue expert.. Any possibility this functionality could be implemented? My dirty solution:

// vue-virtual-table/src/vue-virtual-table.vue

// From Line 344
...
<template slot-scope="props">
<div
  class="item-line"

  @click="handleClickItem(props.item, $event)"
  @contextmenu="$emit('contextmenu',props.item, $event)"
  ....
  ..

// From line 1076
handleClickItem(item, event) {
      let self = this;
      item._eSelected = !item._eSelected && this.selectable;
      self.dataInitTemp.filter((v, i) => v._eId === item._eId)[0]._eSelected =
        item._eSelected;
      self.dataTemp.filter((v, i) => v._eId === item._eId)[0]._eSelected =
        item._eSelected;
      self.dataTemp.splice(0, 0);
      self.dataInitTemp.splice(0, 0);
      self.$emit(
        "changeSelection",
        self.dataInitTemp.filter(v => v._eSelected === true)
      );

      // Emit 'click' event on row clicked
      self.$emit("click", item, event)
}

Example Usage:


<template>
    <vue-virtual-table
            :config="tableConfig"
            :data="tableData"
            @click="handleLeftClick"
            @contextmenu="handleRightClick"
    >
   </vue-virtual-table>
</template>
waningflow commented 4 years ago

Your solution looks ok. You might create a PR to this project.