Я использую quasar framework для своего проекта, и у меня проблема с компонентом qtable. Я сделал строки таблицы доступными по событию @row-click. Это отлично работает, но у меня есть несколько ячеек кнопок действий на моем столе, и когда я нажимаю любую кнопку действия, срабатывает первое событие @row-click.. Мне нужно указать ячейку тела acitons исключения.. Как я могу это сделать?
Quasar QTable Нажатие кнопки действия в интерактивной строке
Ответы (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