Skip to content
On this page

TDetail 详情组件

基础用法

加边框

每行展示多少项

垂直布局

插槽显示

字典回显

tooltip 显示

label不显示冒号

label文字不加粗

label render显示

TDetail Attributes


1、代码示例

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

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

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

参数说明类型默认值
descData详情页面数据源Array-
----label详情字段说明标题String-
----value详情字段返回值String-
----fieldNamevalue 返回值的字段String-
----slotName插槽(自定义 value)slot-
----bind继承 el-descriptions-item 属性Object-
----span占用的列宽,默认占用 1 列,最多 4 列Number1
----unitvalue值后面占位(通常:单位)String-
----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
isColon是否显示冒号Booleantrue
isLabelBoldlabel是否加粗显示Booleantrue
labelRender自定义labelfunction-
dataList开启 filters 时详情接口返回的数据Object{}
listTypeInfo开启 filters 时下拉数据源Object{}

3、继承 el-descriptions events