Quasar QTable Нажатие кнопки действия в интерактивной строке

Я использую quasar framework для своего проекта, и у меня проблема с компонентом qtable. Я сделал строки таблицы доступными по событию @row-click. Это отлично работает, но у меня есть несколько ячеек кнопок действий на моем столе, и когда я нажимаю любую кнопку действия, срабатывает первое событие @row-click.. Мне нужно указать ячейку тела acitons исключения.. Как я могу это сделать?


person Yusuf ÇAKIRCA    schedule 16.05.2020    source источник


Ответы (3)


Вы можете использовать .stop при нажатии, и это вызовет только действие нажатия кнопки.

<q-btn icon="info" @click.stop="btnclick" dense flat/>

Пример : -

<q-table
  title="Treats"
  :data="data"
  :columns="columns"
  row-key="name" 
  @row-click="onRowClick"
>
  <template v-slot:body-cell-name="props">
    <q-td :props="props">
      <div>
        <q-badge color="purple" :label="props.value"></q-badge>
        <q-btn icon="info" @click.stop="btnclick" dense flat/>
      </div>
    </q-td>
  </template>
</q-table>

codepen — https://codepen.io/Pratik__007/pen/oNjQYBW

person Patel Pratik    schedule 18.05.2020

Введите ниже код везде, где вы хотите остановить действие щелчка.

<q-btn v-on:click.stop="onClickFunction"/>

Этот код приведет к тому, что событие Click остановит родительскую функцию щелчка и запустит собственную функцию щелчка, указанную в этом компоненте.

person DJ26    schedule 18.05.2020

Я нашел решение своей проблемы с помощью метода ниже;

 <q-table :data="listProjects(this.$route.params.id)" :columns="columns" row-key="id" @row-click="rowClicker" selection="multiple" :selected.sync="selectedItems">



rowClicker (e, row) {
  if (e.target.nodeName === 'TD') {
    this.$router.push('project/parts/' + row.id)
  }
}

Все клики исходят от элемента TD, кроме нажатия моей кнопки. Если он инициирован элементом TD, он будет маршрутизироваться, если нет, то нет.

person Yusuf ÇAKIRCA    schedule 20.05.2020