使用Vuetify中的V-data-table组件，如何将CRUD(刷新)操作添加到“每页的项目数”所在的行？

5kgi1eie 于 2023-03-19 发布在 Vue.js

关注(0)|答案(2)|浏览(262)

我是一个初学者（主要是一个用户体验设计师），我有一个v-data-table组件，我想在数据表的底部添加一个刷新按钮，如下所示：
Data table from Vuetify documentation with refresh button added where I want it
我的表只使用模板和插槽来添加数据到表中。我的问题是，如果我想在数据之外的表左下角添加一个刷新按钮（如图所示），我该如何完成呢？图中没有刷新按钮的表的代码在这里（取自Vue的数据表页面）

<template>
  <v-data-table
    v-model:items-per-page="itemsPerPage"
    :headers="headers"
    :items="desserts"
    item-value="name"
    class="elevation-1"
  ></v-data-table>
</template>

我试着在v-data-table中添加刷新按钮的代码，但是它什么也没做，因为我认为它需要一个模板。如果我在表外添加它，它会在整个表下，而不仅仅是在我想要的数据下。我不确定Vue是否提供了v-data-table模板，允许您使用“items-per-page”文本更改底部行。但这正是我想要实现的。Vue文档没有提供太多帮助。我能找到的最接近的东西是如何将CRUD操作添加到每一行或表头。我不知道如何将CRUD操作添加到数据表的左下角

vue.js

来源：https://stackoverflow.com/questions/75654777/using-a-v-data-table-component-in-vuetify-how-do-i-add-a-crud-refresh-action

2条答案

按热度按时间

s1ag04yj1#

我最终使用了v-slot:footer，并将position:absolute应用到我的图标上，使其保持在左下角。代码为：

<template>
      <v-data-table
        v-model:items-per-page="itemsPerPage"
        :headers="headers"
        :items="desserts"
        item-value="name"
        class="elevation-1"
      >
        <template v-slot:footer>
          <v-icon style="position: absolute"> mdi-refresh </v-icon>
        </template>
     </v-data-table>
  </template>

赞(0）回复(0）举报 2023-03-19

nhhxz33t2#

你能使用槽为自定义页脚

<template>
  <v-data-table
    :items-per-page="5"
    :headers="headers"
    :items="desserts"
    item-value="name"
    class="elevation-1"
  >
    <template v-slot:footer.prepend>
      <div style="position:absolute; left:20px;">
        <v-icon> mdi-refresh </v-icon>
      </div>
    </template>
  </v-data-table>
 </template>

和页脚应该是相对的

.v-data-footer {
  position: relative;
}

赞(0）回复(0）举报 2023-03-19

我来回答

使用Vuetify中的V-data-table组件，如何将CRUD(刷新)操作添加到“每页的项目数”所在的行？

2条答案

相关问题

热门标签

最新问答