Quasar QTable 单击可单击行上的操作按钮答案

【问题标题】：Quasar QTable Clicking an action button on clickable rowQuasar QTable 单击可单击行上的操作按钮
【发布时间】：2020-09-02 05:34:06
【问题描述】：

我正在为我的项目使用 quasar 框架，但我在 qtable 组件上遇到了问题。我通过@row-click 事件使表格行可点击。这很好，但我的桌子上有一些操作按钮单元格，当我单击任何操作按钮时，第一个 @row-click 事件触发..我需要给异常 acitons 正文单元格..我该怎么做？

【问题讨论】：

标签： quasar

【解决方案1】：

您可以在点击时使用.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

【讨论】：

【解决方案2】：

在您想要停止点击操作的任何位置输入以下代码。

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

此代码将导致 Click 事件停止父单击功能并运行在该组件上指定的自己的单击功能

【讨论】：

【解决方案3】：

我通过以下方法找到了我的问题的解决方案；

 <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 元素触发的，它将路由，否则不会。

【讨论】：