如何在鼠标悬停在使用 Vuetify 数据表的表格时显示按钮

Posted 2023-02-22

【中文标题】如何在鼠标悬停在使用 Vuetify 数据表的表格时显示按钮

【英文标题】：How to Show buttons just when the mouse is hovering the table using Vuetify Data table

【发布时间】：2020-02-04 12:03:20

【问题描述】：

我是刚开始使用 Vuetify 开发 Vue.js 的新手。这里我使用 v-data-table 组件来显示表格数据。 是否有一个选项，当用户用鼠标越过（悬停）表格时，他可以看到表格中的按钮？或者如果我在显示按钮上选择行隐藏行值。如果我选择多个，那么我们需要在表格标题部分显示按钮（如标题标题禁用显示按钮。）我像这样共享图像。 在此处输入图片描述enter image description here]2

【问题讨论】：

v-table 采用 #item 插槽，您可以在其中自定义行布局 - 因此添加 @mouseover 事件

你能和我分享一下简要说明吗

我做了一些可能让你对插槽机制有所了解的事情：***.com/a/57524610/11204469——vuetify 文档上还有一个示例：vuetifyjs.com/en/components/…

【参考方案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