Skip to content

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" },
    ],
  },
]);

Released under the MIT License.