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

Question

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