Как показывать кнопки, только когда мышь наводит курсор на таблицу, используя таблицу Vuetify Data

Question

Я новичок в работе с Vuetify и начинаю работать над Vue.js. Здесь я использую компонент v-data-table для отображения данных таблицы. Есть ли возможность, что когда пользователь переходит (наводит курсор) на таблицу с помощью мыши, он может видеть кнопки в таблице? или если я выбираю скрыть строки значения строк при отображении кнопок. если я выбрал несколько, то нам нужно показать кнопки в части заголовка таблицы (например, заголовки заголовка отключить показывают кнопки). Я поделился изображением, как это. введите описание изображения здесь введите описание изображения здесь ] 2

Answer 1

Вот как я бы это сделал, используя

`

 <template v-slot:body="{ items }">
            <tbody>
              <tr
                v-for="item in items"
                :key="item.id"
                :search="search"
                @mouseover="selectItem(item)"
                @mouseleave="unSelectItem()"
              >
                <td>
                  <v-checkbox
                    multiple
                    v-model="selected"
                    :value="item"
                    style="margin:0px;padding:0px"
                    hide-details
                  />
                </td>
                <td> {{ item.one }}</td>
                <td> {{ item.two }}</td>
                <td> {{ item.three }}</td>
                <td>
                  <div v-if="item === selectedItem">
                  <v-btn>click</v-btn>

                   </div>
                    </td>
                </tr>
              </tbody>

`

https://codepen.io/TamerKhraisha/pen/BaaRqGo