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: 586 · Posted: 2024-02-26
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...