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

目录

1、需求

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

​编辑

3.组件集成了以下功能

4.参数配置

示例代码

参数说明 

5,组件 

6.页面使用

---

1、需求

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

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

3.组件集成了以下功能

操作按钮自定义
字典类型（即后台返回的是数字类型）过滤转成中文
自定义模版 数组类型 对象类型 
渲染图片

4.参数配置

示例代码

参数说明 

 * [
     * {
     * title:String 分类标题
     * column:Number 每行几个（默认2）
     * size:String 大小 medium / small / mini（默认 medium）
     * border:Boolean边框（默认true）
     * keyArr:[
     * {
     * icon:String,(描述标题的图标)
     * label:String,描述标题
     * keyName:String（对应的翻译值）
     * innerKey:String 数组时对应的翻译值
     * detailType："image"渲染图片
     * formatter:Function :自定义渲染
     * getTranslation：Function：为对象时处理翻译的值
     * }
     * ]
     * extra:{ '操作按钮'
     * text:String（按钮文案）
     * methods:function(方法回调)
     * }
     * }
     * ]

5,组件 

6.页面使用