Skip to content

TDetail 详情组件 ​

基础用法 ​

加边框 ​

每行展示多少项 ​

垂直布局 ​

插槽显示 ​

字典回显 ​

tooltip 显示 ​

label不显示冒号 ​

label文字不加粗 ​

label render显示 ​

TDetail Attributes ​


1、代码示例 ​

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

html
<!-- 常规模式 -->
<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 ​