Skip to content
On this page

JnDetail 详情组件

基础用法

加边框

每行展示多少项

垂直布局

插槽显示

字典回显

tooltip 显示

JnDetail Attributes


1、代码示例

详情组件————可实现表单回显

html
<!-- 常规模式 -->
<jn-detail :descData="descData" />
<!-- 字典回显模式 -->
<jn-detail :descData="descData" :dataList="dataList"
:listTypeInfo=="listTypeInfo" />
<!-- 常规模式 -->
<jn-detail :descData="descData" />
<!-- 字典回显模式 -->
<jn-detail :descData="descData" :dataList="dataList"
:listTypeInfo=="listTypeInfo" />

2、配置参数(Attributes)继承 el-descriptions Attributes

参数说明类型默认值
descData详情页面数据源Array
----label详情字段说明标题String
----value详情字段返回值String
----fieldNamevalue 返回值的字段String
----slotName插槽(自定义 value)slot
----span占用的列宽,默认占用 1 列,最多 4 列Number1
----tooltipvalue 值的提示语String/function
----iconSizetooltip 提示语的 icon 大小String/Number继承字体大小
----iconColortooltip 提示语的 icon 颜色String继承颜色
----filters字典类型(即后台返回的是数字类型)过滤转成中文Object
-------list字典 list 定义的数据名即 listTypeInfo 里面对应的值String
-------key下拉数据源的 key 字段String'value'
-------label下拉数据源的 label 字段String'label'
descColumn布局一行显示几列(默认:一行显示 4 列)Number4
dataList开启 filters 时详情接口返回的数据Object{}
listTypeInfo开启 filters 时下拉数据源Object{}

3、继承 el-descriptions events