我是使用 Vuetify 开始和研究 Vue.js 的新手。这里我使用 v-data-table 组件来显示表格数据。
是否有一个选项,当用户用鼠标越过(悬停)表格时,他可以看到表格中的按钮?或者如果我在显示按钮上选择行隐藏行值。如果我选择多个,那么我们需要在表格标题部分显示按钮(如标题标题禁用显示按钮。)我像这样共享图像。
在此处输入图片描述 enter image description here ] 2
最佳答案
这是我将如何做到这一点,使用
`
<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
关于vue.js - 如何使用 Vuetify 数据表在鼠标悬停在表上时显示按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58265371/