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

1、需求

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

2、想要的效果就是由图一变成图二

在这里插入图片描述

3、组件集成了以下功能

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

4、参数配置

示例代码

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

配置参数(Attributes)

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

5、最终效果

在这里插入图片描述

6、如上图如何解析盘点类型(即解析字典数据)

在这里插入图片描述

7、组件地址

gitHub组件地址

gitee码云组件地址

8、相关文章

基于Element-ui和ant-design-vue再次封装基础组件文档

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wocwin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值