标签: v-data-table

在v-data-table具有top狭槽，具有pagination支撑其结构相匹配，所述的footer槽。是否可以将top插槽分配给正在使用的相同（大概是一个v-pagination）控件footer？

我的目标是复制表格顶部的分页控件（位于页脚中）。

vuetify 3什么时候支持vue3中的v-data-table？

我尝试过 vuetify 3.0 beta，显然它不支持 vue 3 的 v-data-table。有这方面的时间表吗？我一直在进行迁移，因为我的应用程序使用此表作为主页中的主要功能。

我是 vuetify 的新手，在将 v-data-table 导出为 excel、csv 格式时遇到问题。我该怎么做。任何建议或推荐。太感谢了。

所以，我正在使用 VueJs 3.2、Vite 3.2.4、Vuetify 3.2.2...

我知道应该如何声明 DataTable 上的选项，以便删除页脚和分页，如下所示：

 <VDataTable
   :search="searchQuery"
   :headers="headers"
   :items="organizations"
   disable-pagination   
   hide-default-footer
   class="elevation-1 px-lg-4"
 >

至少这是我上次在文档和论坛上搜索时发现的，使用禁用分页和隐藏默认页脚来实现预期结果。

但这不起作用。该表显示了我的数据，完全没有错误，但页脚/分页仍然存在。

我什至尝试设置页脚道具，这是一个旧的解决方案：

:footer-props="{ disablePagination : true, disableItemsPerPage : true }"

但没有任何作用...

对这些人有什么想法吗？

Vuetifyv-data-table支持多种类型的槽：v-slot:body、v-slot:item和v-slot:item.<name>。

我们一直在v-slot:item.<name>广泛使用，因为它们提供了一种灵活的方式来设计和处理各个列中的内容，并允许以编程方式更改表标题。

我想为我的行添加可拖动性，并使用Vue.Draggablev-data-table完成此工作。

然而，该draggable组件需要使用 iev-data-table v-slot:body来控制表的整个主体，从而失去 的灵活性v-slot:item.<name>。

有没有办法将这两个组件一起使用并提供v-slot:item.<name>支持？

我正在使用 Vuetify 的 v-data-tables 和....

我想更改此文本：

我已经添加了这段代码，但它不起作用：

谢谢！

我的标题：

headers: [
 { text: "Product Name", value: "name" },
 { text: "Quantity", value: "quantity" },
 { text: "Price", value: "price" },
 { text: "Orders", value: "itemsSold" },
 { text: "Revenue", value: "revenue" },
 { text: "Status", value: "active" },
],

我的模板项目：

headers: [
 { text: "Product Name", value: "name" },
 { text: "Quantity", value: "quantity" },
 { text: "Price", value: "price" },
 { text: "Orders", value: "itemsSold" },
 { text: "Revenue", value: "revenue" },
 { text: "Status", value: "active" …

我有：

    <v-data-table :headers="headers" :items="tableData" :items-per-page="5" class="elevation-1">

        <template v-slot:item.id="{ item }">
            {{item.id}}
        </template>

如何将该列的内容垂直居中对齐？

我是 vue.js 的新手，请帮忙。我的表中需要过滤器。每列必须有多个按值选择筛选器。当我们单击列标题时 - 下拉多选打开，我们可以选择过滤值。例如，像这样的Vuetify 数据表内联过滤器，但此示例不适用于 vuetify 2。

我的HTML：

<template>
 <v-card class="elevation-3">
         <v-card-title>
           {{ other_title }}
           <v-btn style="background-color: white; box-shadow: none;" @click="csvExport(other_title, otherIncidentsData)">
               CSV<i class="fas fa-file-csv"></i>
           </v-btn>
           <v-btn text @click="exportToPdf()">
              Pdf<v-icon>mdi-file-pdf-box-outline</v-icon>
            </v-btn>
            <v-btn text @click="showExportModal">
              <v-icon>mdi-email-receive-outline</v-icon>
            </v-btn>
           <v-spacer></v-spacer>
           <v-text-field
             v-model="search"
             append-icon="mdi-magnify"
             label="Search"
             single-line
             hide-details
           ></v-text-field>
         </v-card-title>
         <v-data-table
           :search="search"
           :headers="headers"
           :items="otherIncidents"
           :items-per-page="10"
         >
          <template v-slot:item.priority.name="{ item }">
              <v-chip :color="getPriorityColor(item.priority.name)" dark>{{ item.priority.name }}</v-chip>
          </template>
         </v-data-table>
        </v-card>
</template>

还有JS：

 export default {
      mixins: [
        mixin
      ],
      data() {
        return {
          search: …

我有一个带有 Show-select 的 v-data-table，我想获取我选择的项目的数据，至少在检查时提醒第一列值。我到处寻找。我找不到我的问题的答案。

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :value="selected"
      @input="enterSelect($event)"
      :items-per-page="itemsPerPage"
      :headers="headers"
      :items="desserts"
      item-key="name"
      show-select
      class="elevation-1"
    >
    </v-data-table>
    <v-dialog>
      <v-card>
      </v-card>
    </v-dialog>
  </v-app>
</div>

js

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    enterSelect(values) {
      if (values.length == this.itemsPerPage) {
        alert('selected all')
      }
    }
  },
  data () {
    return {
      selected: [],
      itemsPerPage: 10,
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', …