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

Question

我是新开始使用 Vue.js 和 Vuetify 工作。这里我使用 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>
</template>

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