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

Vuetify About 1,049 words

需求

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>
Views: 228 · Posted: 2024-02-26

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh