Vue3项目中如何使用v-data-table-server组件？

Vuetify 3核心库并未内置v-data-table-server，但Vuetify Labs提供了该组件的实验性版本，可直接在Vue3项目中使用，以下是完整实现步骤及示例：

1. 安装依赖 #

确保项目已安装Vuetify 3，再安装Vuetify Labs包：

npm install @vuetify/labs --save
# 或使用yarn
yarn add @vuetify/labs

2. 注册组件 #

在Vuetify配置文件（通常为src/plugins/vuetify.js）中导入并注册v-data-table-server：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
// 导入实验室版服务器端表格组件
import { VDataTableServer } from '@vuetify/labs/VDataTableServer'

const vuetify = createVuetify({
  components: {
    ...components,
    VDataTableServer,
  },
  directives,
})

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

3. 完整使用示例 #

下面是实现服务器端分页、排序、搜索的Vue3单文件组件示例：

<template>
  <v-container>
    <v-text-field
      v-model="searchQuery"
      label="搜索"
      class="mb-4"
      @input="fetchData"
    />

    <v-data-table-server
      :headers="headers"
      :items="items"
      :server-items-length="totalItems"
      :loading="isLoading"
      @update:options="fetchData"
    >
      <template v-slot:item.name="{ item }">
        <span>{{ item.name }}</span>
      </template>
      <template v-slot:item.email="{ item }">
        <a :href="`mailto:${item.email}`">{{ item.email }}</a>
      </template>
    </v-data-table-server>
  </v-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 表格表头配置
const headers = ref([
  { title: '姓名', key: 'name', sortable: true },
  { title: '邮箱', key: 'email', sortable: true },
  { title: '年龄', key: 'age', sortable: true },
])

// 数据状态管理
const items = ref([])
const totalItems = ref(0)
const isLoading = ref(false)
const searchQuery = ref('')

// 服务器端数据请求函数
const fetchData = async (options = {}) => {
  isLoading.value = true

  // 解析分页、排序参数
  const { page, itemsPerPage, sortBy, sortDesc } = options
  const sortDirection = sortDesc[0] ? 'desc' : 'asc'
  const sortField = sortBy[0] || 'name'

  try {
    // 替换为你的后端API地址，按实际参数格式调整
    const response = await fetch(`/api/users?page=${page}&per_page=${itemsPerPage}&sort=${sortField}&direction=${sortDirection}&search=${searchQuery.value}`)
    const data = await response.json()

    items.value = data.data // 列表数据
    totalItems.value = data.total // 总数据条数
  } catch (error) {
    console.error('数据请求失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 初始化加载数据
onMounted(() => {
  fetchData()
})
</script>

核心说明 #

• @update:options事件会监听分页、排序操作，触发数据重新请求
• server-items-length用于告知组件总数据量，以正确生成分页器
• loading属性控制加载状态的展示
• 需根据后端API的参数规则，调整fetchData中的请求参数结构

注意事项 #

• 该组件为Vuetify Labs的实验性组件，API可能随版本迭代调整，使用前留意官方更新
• 若后端返回的数据格式与示例不同，需对应修改数据解析逻辑

内容的提问来源于stack exchange，提问作者Igor Pronin