q-table 上的 onclick 事件在将道具传递给模板后停止工作

Question

我知道了 table 我想根据我的数据为每一行着色。这有效，但由于某种原因似乎禁用了我在 q-table 中的 onclick 事件。 @row-click="onRowClick"

我不明白为什么会这样。我是类星体的新手，老实说，我不是 100% 确定这个引用是如何工作的 v-slot:body="props"

最终我希望这是一个路由器事件，点击后将我带到不同的页面。

<div id="q-app">
  <div class="q-pa-md">
    <q-table
        :data="data"
        :columns="columns"
        row-key="id"
        :filter="filter"
        :loading="loading"
        :rows-per-page-options="[5]"
        @row-click="onRowClick"
    >
<!-- If I remove the template here the onRowClick works     -->
        <template v-slot:body="props">
          <q-tr :props="props" :class="tableFormat(props.row)">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">{{
              col.value
            }}</q-td>
          </q-tr>
        </template>
    </q-table>
  </div>
</div>

CSS:

.marked-row {
  background-color: green;
}
.unmarked-row {
  background-color: blue;
}

new Vue({
  el: '#q-app',
  data () {
    return {
      loading: false,
      filter: "",
      rowCount: 10,
        columns: [
        {
          name: "name",
          required: true,
          label: "Name",
          align: "left",
          field: "name",
          // format: val => `${val}`,
          sortable: true
          // style: 'width: 500px'
        },
        {
          name: "age",
          required: true,
          label: "Age",
          align: "left",
          field: "age",
          format: val => `${val}`,
          sortable: true
        },
        {
          name: "location",
          required: true,
          label: "Location",
          align: "left",
          field: "location",
          format: val => `${val}`,
          sortable: true
        }
      ],
      data: [
        {
          id: 1,
          name: "Diana", 
          age: 5,
          location: "Mumbai",
          color: "blue"
        },
        {
          id: 2,
          name: "Billy",
          age: 4,
          location: "Detroit",
          color: "green"
        },
        {
          id: 3,
          name: "Mimmi",
          age: 3,
          location: "New York",
          color: "green"
        },
        {
          id: 4,
          name: "Bengan",
          age: 4,
          location: "Dubai",
          color: "blue"
        },
        {
          id: 5,
          name: "Chloe",
          age: 7,
          location: "Paris",
          color: "green"
        },
        {
          id: 6,
          name: "Ben",
          age: 6,
          location: "Los Angeles",
          color: "blue"
        }
      ]
    }
  },

 methods: {
    tableFormat(val) {
      console.log(val)
      if (val.color === "blue") {
        return "marked-row";
      } else {
        return "unmarked-row";
      }
    },
    onRowClick(evt, row) {
      console.log("clicked on ", row );
    }
  }
})

这是我的笔： https://codepen.io/haangglide/pen/MWeRaJW

Answer 1

医生说

Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots

因此您可以在 q-tr

上使用 @click 事件

codepen - https://codepen.io/Pratik__007/pen/oNLOogY

q-table 上的 onclick 事件在将道具传递给模板后停止工作

Onclick event on q-table stop working after passing props to template

javascript

quasar

quasar-framework

vue-props