DetailDialog
详情弹窗组件,用于展示数据详情。
基础用法
DetailDialog 通常与 PageTemplate 配合使用:
typescript
const pageTemplateRef = ref<PageTemplateExposed>();
// 查看详情
pageTemplateRef.value?.handleDetail(row);自定义详情内容
vue
<template>
<PageTemplate ref="pageTemplateRef">
<template #detail>
<!-- 自定义详情内容 -->
<Descriptions :config="detailConfig" :data="detailData" />
</template>
<template #table>
<Table />
</template>
</PageTemplate>
</template>配合 Descriptions 组件
typescript
import { defineDescriptionsConfig } from "vue-admin-kit";
const detailConfig = defineDescriptionsConfig([
{
title: "基本信息",
column: 2,
children: [
{ label: "名称", value: "name" },
{ label: "状态", value: "status", dictType: "sys_status" },
{ label: "创建时间", value: "createTime" },
],
},
]);