Vuetify v-data-table 表格添加顶部操作按钮

需求

Table表格控件添加操作按钮，如：刷新/新建/查询。

top 插槽

在v-data-table中使用具名插槽v-slot:top。

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :loading="loading"
    loading-text="加载中"
    no-data-text="无数据"
    density="compact"
  >
    <template v-slot:top>
      <v-toolbar color="white">
        <v-toolbar-title>数据列表</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-text-field
          v-model="keywords"
          label="关键字"
          placeholder="请输入关键字"
          append-inner-icon="mdi-magnify"
          @click:append-inner="fetchData"
          @keydown.enter="fetchData"
          hide-details
          single-line
          density="compact"
          variant="outlined"
          :loading="loading"
          @click:clear="fetchData"
          clearable
        ></v-text-field>
        <v-btn icon="mdi-refresh" @click="fetchData" :disabled="loading"></v-btn>
      </v-toolbar>
    </template>
  </v-data-table>
</template>