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

Posted 2021-04-03

我正在为我的项目使用类星体框架，而qtable组件存在问题。我通过@ row-click事件使表行可点击。效果很好，但是我的桌子上有一些动作按钮单元格，当我单击任何动作按钮时，首先触发了@ row-click事件。.我需要给一个异常子体单元格。.该怎么办？

答案

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

另一答案

在您想停止点击动作的任何地方键入以下代码。

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

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

另一答案

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

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