Detail

CuiDetail 详情展示组件

CuiDetail

CuiDetail 用于展示结构化详情信息，适合用户信息、工单信息和审批记录等场景。

基础详情展示

演示多列布局、状态 render 映射与标签宽度

Live Demo

Preview

Code

先看效果，再决定是否展开代码细节。

<script setup lang="ts">
import { CuiDetail } from "@eams-monorepo/vue-element-cui";
import type { CuiDetailField } from "@eams-monorepo/vue-element-cui";

const fields: CuiDetailField[] = [
  { label: "资产名称", prop: "name" },
  { label: "归属部门", prop: "dept" },
  { label: "资产状态", prop: "status", render: (row) => row.status === 1 ? "在用" : "闲置" },
]
const detail = { name: "固定资产台账", dept: "财务共享中心", status: 1 }
</script>

<template>
  <CuiDetail :fields="fields" :data="detail" :columns="2" />
</template>

字段驱动详情布局

通过 fields 和 data 描述详情布局，不必在页面里重复写 label / value 结构。

多列组织信息块

支持按列数组织详情展示，适合信息密度较高的管理后台。

render 承接格式化展示

当字段需要状态映射、时间格式化或金额处理时，可使用 render。

本页目录

推荐写法

GitHub 提交 Issue