使用修饰符 Vuetify v-data-table 行单击事件答案

【问题标题】：Vuetify v-data-table row click event with modifiers使用修饰符 Vuetify v-data-table 行单击事件
【发布时间】：2021-05-20 03:57:43
【问题描述】：

我希望我的 vuetify 数据表上有两个单独的点击事件。
一个带有普通左键单击，一个带有附加修饰符（SHIFT / CTRL 和左键单击）。
这可能吗？

这是一个带有不工作示例的代码笔：
https://codepen.io/borsTiHD/pen/YzpVrNJ

@click="clickEvent" 和 @click:row.ctrl="rowCtrlClicked" 不起作用。

【问题讨论】：

UPD: @click.native.ctrl 有效，但适用于所有数据表
谢谢，可以了。我只是没有在我的方法中传递典型的 vuetify 参数。有没有办法把这个结合起来？我不希望在我的组件中设置全局变量。
您可以填充items 插槽 - 因此您可以执行<template v-slot:items="{item}"><tr @click.native.ctrl="myHandler(item)">
抱歉我的回复晚了。我会试试的。这比我想象的要复杂一些。我需要以这种方式重建我的孔表。我有很多“自定义”列模板。

标签： vue.js vuetify.js

【解决方案1】：

我使用组件中的全局键事件监听器解决了我的问题。我在这里找到了一个例子：
https://codepen.io/ryancwynar/pen/jOWoXZw

我的代码：
我在created()和beforeDestroy()中设置了this.registerKeyHandler(true/false)

registerKeyHandler(register) {
    if (register) {
        window.addEventListener('keydown', this.keyHandler)
        window.addEventListener('keyup', this.keyHandler)
    } else {
        window.removeEventListener('keydown', this.keyHandler)
        window.removeEventListener('keyup', this.keyHandler)
    }
},
keyHandler(event) {
    if (!event.key === 'Control' && !event.key === 'Shift') return false
    if (event.key === 'Control' && event.type === 'keydown') {
        this.ctrlKeyOn = true
    } else if (event.key === 'Control' && event.type === 'keyup') {
        this.ctrlKeyOn = false
    } else if (event.key === 'Shift' && event.type === 'keydown') {
        this.shiftKeyOn = true
    } else if (event.key === 'Shift' && event.type === 'keyup') {
        this.shiftKeyOn = false
    }
},

【讨论】：