子组件导出

除了 PageTemplate 和 Table 主组件外，vue-admin-kit 还导出以下子组件，可以单独使用。

组件列表

布局组件

组件	说明
PageTemplate	主 CRUD 页面模板组件
Table	基于 VXE-Table 封装的表格组件
Descriptions	数据展示组件，支持字典、文件、富文本等展示类型

弹窗组件

组件	说明	详细文档
FormDialog	表单弹窗，用于新增/编辑	详见
DetailDialog	详情弹窗，用于查看数据详情	详见
Drawer	抽屉组件，侧边滑出的面板	详见
FileListDialog	文件列表弹窗	详见

搜索组件

组件	说明
SearchForm	搜索表单，配置化生成搜索栏

表单控件

所有表单控件的详细用法请参考 表单控件详解。

组件	说明	详细文档
Input	输入框，支持后缀单位	详见
Textarea	多行文本输入	详见
Number	数字输入框，支持精度、范围	详见
Select	下拉选择器，支持字典、远程搜索	详见
SelectChange	搜索选择组件，支持搜索并选择关联数据	详见
Radio	单选框，支持字典	详见
Date	日期选择器，支持日期、日期时间、范围	详见
Time	时间选择器	详见
Upload	文件上传组件	详见
UploadCard	卡片式文件上传，支持多类型文件分组上传	详见
WangeEitor	富文本编辑器（基于 WangEditor）	详见
Line	分割线，可带标题和按钮	详见
InputGroup	输入框组，多个输入框的组合	详见
AddableInputGroup	可添加输入组，支持动态添加/删除	详见

辅助组件

组件	说明	详细文档
DictHelper	字典转换组件，将字典值转换为标签显示	-
DictTag	字典标签组件，纯粹的字典标签显示	详见
SafeHtml	安全 HTML 渲染（使用 DOMPurify）	-

导入方式

import {
  // 布局组件
  PageTemplate,
  Table,
  Descriptions,

  // 弹窗组件
  FormDialog,
  DetailDialog,
  Drawer,
  FileListDialog,

  // 搜索组件
  SearchForm,

  // 表单控件
  Input,
  Textarea,
  Number,
  Select,
  SelectChange,
  Radio,
  Date,
  Time,
  Upload,
  UploadCard,
  WangeEitor,
  Line,
  InputGroup,
  AddableInputGroup,

  // 辅助组件
  DictHelper,
  DictTag,
  SafeHtml,

  // 工具函数
  downloadFile,
  useTableHeightEmitter,
} from "vue-admin-kit";

弹窗组件详解

提示

FormDialog、DetailDialog、Drawer 组件都有独立的详细文档页面，以下仅提供快速参考示例。

FormDialog 表单弹窗

表单弹窗组件，用于新增/编辑数据。详细文档请参考 FormDialog 组件。

<script setup>
import { ref } from "vue";
import { FormDialog } from "vue-admin-kit";

const visible = ref(false);
const formData = ref({});
const formConfig = [
  { type: "input", prop: "name", label: "名称", required: true },
  { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
];

const handleSubmit = async () => {
  // 提交逻辑
};
</script>

<template>
  <FormDialog
    v-model="visible"
    v-model:form-data="formData"
    title="新增用户"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

DetailDialog 详情弹窗

详情弹窗组件，用于查看数据详情。详细文档请参考 DetailDialog 组件。

<script setup>
import { ref } from "vue";
import { DetailDialog } from "vue-admin-kit";

const visible = ref(false);
const detailData = ref({});
const formConfig = [
  { type: "input", prop: "name", label: "名称" },
  { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
];
</script>

<template>
  <DetailDialog
    v-model="visible"
    :detail-data="detailData"
    :form-config="formConfig"
  />
</template>

Drawer 抽屉

抽屉组件，侧边滑出的面板。详细文档请参考 Drawer 组件。

<script setup>
import { ref } from "vue";
import { Drawer } from "vue-admin-kit";

const visible = ref(false);
</script>

<template>
  <Drawer v-model="visible" title="详情" size="50%">
    <template #default>
      <!-- 抽屉内容 -->
    </template>
  </Drawer>
</template>

FileListDialog 文件列表弹窗

文件列表弹窗组件，用于展示和管理文件列表。

<script setup>
import { ref } from "vue";
import { FileListDialog } from "vue-admin-kit";

const visible = ref(false);
const fileList = ref([
  { url: "https://example.com/file.pdf", originalName: "文件.pdf" },
]);
</script>

<template>
  <FileListDialog v-model="visible" :file-list="fileList" />
</template>

工具函数

downloadFile

文件下载工具函数：

import { downloadFile } from "vue-admin-kit";

// 下载文件
await downloadFile(api.downloadTemplate, "导入模板");

// 指定文件类型
await downloadFile(api.exportData, "数据导出", "xlsx");

useTableHeightEmitter

表格高度事件发射器：

import { useTableHeightEmitter } from "vue-admin-kit";

const emit = defineEmits(["setTableHeight"]);
const { emitSetTableHeight } = useTableHeightEmitter(emit);

// 触发高度更新
emitSetTableHeight();