Vuetify - v-simple-checkbox 防止 v-data-table row.click 事件

Question

在 v-data-table 中使用 v-simple-checkbox 时，单击复选框或其周围区域不会调用 row.click 事件。

此 CodePen 示例显示 select 在 row.click 上 table 数据行。但是，如果使用更多带有复选框的列，几乎不可能 select 一行。

v-simple-checkbox 中似乎使用了 .stop 事件处理程序。有什么方法可以通过单击该组件来触发 row.click 事件吗？

Answer 1

如果最后一列复选框只是为了显示，您可以只使用 v-icon 来呈现正确的复选框图标。

<template v-slot:item.glutenfree="{ value }">
    <v-icon>
        {{ value ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
    </v-icon>
</template>

Vuetify - v-simple-checkbox 防止 v-data-table row.click 事件

Vuetify - v-simple-checkbox prevents v-data-table row.click event

vuetify.js

v-data-table