vue+element-ui el-descriptions 详情渲染组件二次封装（Vue项目）

一般后台管理系统，通常页面都有增删改查；而查不外乎就是渲染新增/修改的数据（由输入框变成输入框禁用），因为输入框禁用后颜色透明度会降低，显的颜色偏暗；为解决这个需求于是封装了详情组件

在这里插入图片描述

1、详情页面value值可以自定义插槽
2、详情页面value值可以自定义tip(提示)
3、字典类型（即后台返回的是数字类型）过滤转成中文
1
2
3

<t-detail :descData="descData" />
1

参数	说明	类型	默认值
descData	详情页面数据源	Array	无
----label	详情字段说明标题	String	无
----value	详情字段返回值	String	无
----fieldName	value 返回值的字段	String	无
----slotName	插槽（自定义 value）	slot	无
----span	占用的列宽，默认占用 1 列，最多 4 列	Number	1
----tooltip	value 值的提示语	String/function	无
----filters	字典类型（即后台返回的是数字类型）过滤转成中文	Object	无
-------list	字典 list 定义的数据名即 listTypeInfo 里面对应的值	String	无
-------key	下拉数据源的 key 字段	String	‘dictValue’
-------label	下拉数据源的 label 字段	String	‘dictLabel’
dataList	开启 filters 时详情接口返回的数据	Object	{}
listTypeInfo	开启 filters 时下拉数据源	Object	{}

在这里插入图片描述

在这里插入图片描述

相关阅读:
【Spring项目中的Service理解】
共轴双旋翼无人机动力测试解决方案
苹果应用高版本出现：“无法安装此app，因为无法验证其完整性”是怎么回事?竟然是错误的?
elementUI select组件value注意事项(value失效问题)
java面试题整理《微服务篇》二
负责任de老师
Python使用GARCH，EGARCH，GJR-GARCH模型和蒙特卡洛模拟进行股价预测
基于stm32单片机多功能可调时钟闹钟万年历计时器闹铃提醒Proteus仿真
清理vdbench后台进程
7、JProfiler工具分析OOM原因

原文地址：https://blog.csdn.net/cwin8951/article/details/126412703