Блог

Главная - Вопросы по программированию - используйте событие @contextmenu с помощью vuetify v-data-table

используйте событие @contextmenu с помощью vuetify v-data-table

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Я пытаюсь создать пользовательское контекстное меню, которое появляется при щелчке правой кнопкой мыши по строке в компоненте v-data-table.

как я могу этого добиться?

Комментарии:

1. пожалуйста, поделитесь некоторым кодом и тем, что вы уже пробовали

2. это не ошибка, просто функция vuetify, которую я не знаю, как реализовать.. Я пытаюсь запустить событие contextmenu в каждой строке v-data-table и не знаю как .. документация не содержит такой вещи, и я не хочу использовать v-slot для всей строки, потому что у меня уже есть несколько настроенных полей, и я не хочу настраивать записи всей строки..

3. чего вы хотите от этого события?

4. просто чтобы показать пользовательское contextmenu , набор действий, которые будут применены к некоторой выбранной строке в таблице, я хочу взять данные из самой компонентной модели vue

5. но вы должны использовать пользовательский рендеринг строк со слотами и запускать это событие в каждой строке

Ответ №1:

Для этого есть 2 способа.

Используя обычные строки v-data-table

Просто добавьте contextmenu:row событие прослушивания v-data-table компонента и наслаждайтесь волшебством каждой строки, вызывающей это событие при щелчке правой кнопкой мыши. Запишите это событие и обработайте его в JS.

 <v-data-table :items="myItems"
              :headers="headers"
              @contextmenu:row="rightClickHandler"
              ...
/>

Затем вы делаете все, что хотите, с событием и элементом, генерирующим это событие

 methods: {
  rightClickHandler(event, item) {
    // do something with event and/or item
    console.log(event, item)
  }
}

ПРИМЕЧАНИЕ: не будет генерироваться, когда строки таблицы определены через слот, такой как item или body.

Использование таблицы с item / body слотами

При использовании слотов для создания cutom собственных строк таблицы вам нужно будет вручную запускать событие для каждой строки самостоятельно

 <v-data-table
  :headers="headers"
  :items="myItems"
  ...
  <template v-slot:body="{ items }">
    <tbody>
      <tr v-for="(item, index) in items"
          :key="item.id"
          @contextmenu="rightClick($event, item)"
          ...

И на стороне сценария просто реализуйте функцию для обработки события и элемента, на который нажимается

 methods: {
  rightClick(event, item) {
    console.log(item)
    event.preventDefault()
  },