Skip to content

ProDescriptions

ProDescriptions 是对 naive-uin-descriptions 组件的封装,提供了更强大的功能和更便捷的使用方式。它可以与 n-tablen-form 组件配合使用,用于展示详细的信息列表或数据项的描述。ProDescriptions 组件支持自动生成描述列表,当与表格或表单一起使用时,可以方便地显示数据的详细信息,包括字段名称、值以及自定义的渲染方式。

基础用法

用户详情
姓名年龄
张三28
地址
北京市朝阳区
Default
expand codecollapse code

自定义列数和尺寸

员工详情
姓名年龄职位
李四35产品经理
部门地址
产品部上海市浦东新区
Default
expand codecollapse code

自定义渲染示例

用户详情
姓名注册日期
张三9/30/2023
邮箱
zhangsan@example.com
Default
expand codecollapse code

参数

参数类型可选值默认值说明
columnsArray<{ title: string; key: string; render?: Function }>[]描述列表的列配置,与 n-table 的 columns 配置类似,可直接复用
dataRecord<string, any>{}描述列表的数据对象,包含要展示的字段和值
titlestring''描述列表的标题,显示在列表的顶部
colNumbernumber2每行显示的描述项数量
size'small' | 'medium' | 'large''small' 'medium' 'large''medium'描述列表的尺寸大小
borderedbooleantrue falsefalse是否显示边框