vue.js - 如何在鼠标悬停在使用 Vuetify 数据表的表格时显示按钮
问题描述
我是新手,刚开始使用 Vuetify 开发 Vue.js。这里我使用 v-data-table 组件来显示表格数据。是否有一个选项,当用户用鼠标移动(悬停)表格时,他可以看到表格中的按钮?或者如果我在显示按钮上选择行隐藏行值。如果我选择多个,那么我们需要在表格标题部分显示按钮(如标题标题禁用显示按钮。)我像这样共享图像。在此处输入图像描述 在此处输入图像描述] 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>
`
推荐阅读
- java - 泛型/接口方法不适用
- r - R:基于变量创建重复行(首选 dplyr)
- spring-boot - 如何在 Spring Boot 2 中处理 security.enable-csrf?
- python - 在一个 Pandas 系列中找到两个近似值。根据条件在另一个上创建标志
- azure - 通过 IP 访问 Azure 网站导致 404 错误
- android - 使用 Glide 加载图像需要太多时间
- sas - 如何在 SAS 中找到一个组中的人员百分比?
- json - JSON 语法数据格式
- scala - 为 akka.actor.LocalActorRefProvider 禁用 akka 日志记录?
- java - 如何比较两个 JSON 对象或字符串以获得它们之间的差异报告(JAVA)