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

    目录

    1、需求

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

    ​编辑

    3.组件集成了以下功能

    4.参数配置

    示例代码

    参数说明 

    5,组件 

    6.页面使用

    1、需求

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

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

    3.组件集成了以下功能

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

    4.参数配置

    示例代码

        <orderDetail :descList="detailModule" :data="renderData"></orderDetail>

    参数说明 

    1.  * [
    2.      * {
    3.      * title:String 分类标题
    4.      * column:Number 每行几个（默认2）
    5.      * size:String 大小 medium / small / mini（默认 medium）
    6.      * border:Boolean边框（默认true）
    7.      * keyArr:[
    8.      * {
    9.      * icon:String,(描述标题的图标)
    10.      * label:String,描述标题
    11.      * keyName:String（对应的翻译值）
    12.      * innerKey:String 数组时对应的翻译值
    13.      * detailType："image"渲染图片
    14.      * formatter:Function :自定义渲染
    15.      * getTranslation：Function：为对象时处理翻译的值
    16.      * }
    17.      * ]
    18.      * extra:{ '操作按钮'
    19.      * text:String（按钮文案）
    20.      * methods:function(方法回调)
    21.      * }
    22.      * }
    23.      * ]

    5,组件 

    1. <template>
    2.   <div class="detail-box demo-image__error cell-44">
    3.     <el-descriptions v-for="(item, index) in descList" :border="item.border || true" :key="'descList' + index"
    4.       class="mb20" :title="item.title || ''" :column="item.column || 2" labelClassName="custom-label"
    5.       contentClassName="custom-content" :size="item.size || 'medium'">
    6.       <template slot="extra" v-if="item.extra">
    7.         <el-button type="primary" size="small" @click="item.extra.methods(item, index)">{{ item.extra.text }}</el-button>
    8.       </template>
    9.       <!-- 描述title -->
    10.       <el-descriptions-item v-for="(descKey, innerIndex) in item.keyArr" :key="innerIndex + 'desc'">
    11.         <template slot="label" v-if="descKey.label">
    12.           <i class="el-icon-user" v-if="item.icon"></i>
    13.           {{ descKey.label }}
    14.         </template>
    15.         <!-- 图片类型数据 -->
    16.         <div class="cell" v-if="descKey.detailType == 'image'">
    17.           <el-image style="width: 44px; height: 44px" :src="data[descKey.keyName]">
    18.             <div slot="error" class="image-slot">
    19.               <i class="el-icon-picture-outline"></i>
    20.             </div>
    21.           </el-image>
    22.         </div>
    23.         <!-- 自定义模版 -->
    24.         <div v-else-if="descKey.formatter" v-html="descKey.formatter(data)"></div>
    25.         <!-- 数组对象、或数组 -->
    26.         <template v-else-if="Array.isArray(data[descKey.keyName])">
    27.           <el-tag v-for="(innerItem, innerI) in data[descKey.keyName]" :key="'tag' + innerI" size="small"
    28.             class="mr10 mb10">
    29.             {{ (descKey.innerKey ? innerItem[descKey.innerKey] : innerItem) || "--" }}
    30.           </el-tag>
    31.         </template>
    32.         <!-- 默认键值对 -->
    33.         <span v-else-if="(data[descKey.keyName] || data[descKey.keyName] === 0) &&
    34.           typeof data[descKey.keyName] !== 'object'
    35.           ">
    36.           {{
    37.             data[descKey.keyName] || data[descKey.keyName] == 0
    38.             ? data[descKey.keyName]
    39.             : "--"
    40.           }}
    41.         </span>
    42.         <!-- 对象类型数据 -->
    43.         <span v-else-if="typeof data[descKey.keyName] === 'object'">
    44.           <el-descriptions :data="data[descKey.keyName]" :border="false">
    45.             <el-descriptions-item v-for="(value, key) in data[descKey.keyName]" :key="key">
    46.               <template slot="label">{{ descKey.getTranslation(key, index) }}</template>
    47.               <span>{{ value }}</span>
    48.             </el-descriptions-item>
    49.           </el-descriptions>
    50.         </span>
    51.         <!-- 没有匹配项目 -->
    52.         <span v-else>--</span>
    53.  
    54.       </el-descriptions-item>
    55.     </el-descriptions>
    56.   </div>
    57. </template>
    58.  
    59. <script>
    60. export default {
    61.   props: {
    62.     /**
    63.      * [
    64.      * {
    65.      * title:String 分类标题
    66.      * column:Number 每行几个（默认2）
    67.      * size:String 大小 medium / small / mini（默认 medium）
    68.      * border:Boolean边框（默认true）
    69.      * keyArr:[
    70.      * {
    71.      * icon:String,(描述标题的图标)
    72.      * label:String,描述标题
    73.      * keyName:String（对应的翻译值）
    74.      * innerKey:String 数组时对应的翻译值
    75.      * detailType："image"渲染图片
    76.      * formatter:Function :自定义渲染
    77.      * getTranslation：Function：为对象时处理翻译的值
    78.      * }
    79.      * ]
    80.      * extra:{ '操作按钮'
    81.      * text:String(文案)
    82.      * methods:function(方法回调)
    83.      * }
    84.      * }
    85.      * ]
    86.      */
    87.     descList: {
    88.       type: Array,
    89.       default: () => {
    90.         return [];
    91.       },
    92.     },
    93.     data: {
    94.       type: Object,
    95.       default: () => {
    96.         return {};
    97.       },
    98.     },
    99.   },
    100. };
    101. </script>
    102.  
    103. <style lang="scss">
    104. .custom-label,
    105. .custom-content {
    106.   width: 25% !important;
    107. }
    108.  
    109. .demo-image__error .image-slot,
    110. .demo-image__placeholder .image-slot {
    111.   display: flex;
    112.   justify-content: center;
    113.   align-items: center;
    114.   width: 100%;
    115.   height: 100%;
    116.   background: #f5f7fa;
    117.   color: #909399;
    118.   font-size: 14px;
    119. }
    120.  
    121. .cell-44 {
    122.   .cell {
    123.     height: 44px;
    124.     line-height: 44px;
    125.   }
    126. }
    127. </style>

    6.页面使用

    1. <template>
    2.   <div class="table-page">
    3.     <FormDetail :descList="detailModule" :data="renderData"></FormDetail>
    4.   </div>
    5. </template>
    6. <script>
    7. import FormDetail from "@/components/FormDetail/details.vue";
    8. export default {
    9.   components: {
    10.     FormDetail,
    11.   },
    12.   data() {
    13.     return {
    14.       detailModule: [
    15.         {
    16.           translations: { age: "年龄", name: '姓名' },
    17.           title: "信息",
    18.           keyArr: [
    19.             { label: "账户名称", keyName: "AccountName" },
    20.             { label: "账户id", keyName: "AccountId" },
    21.             { detailType: 'image', label: '头像', keyName: 'image' },
    22.             {
    23.               formatter: (data) => {
    24.                 console.log(data, '------');
    25.                 return `<span style="white-space: nowrap;color: dodgerblue;">${data.status}</span>`;
    26.               },
    27.               label: '自定义',
    28.             },
    29.             { label: '数组', keyName: 'list', innerKey: 'asList' },
    30.             {
    31.               label: "测试", keyName: "obj",
    32.               getTranslation: (key, index) => {
    33.                 return this.detailModule[index].translations[key] || key; // 如果找不到翻译，返回键本身
    34.               }
    35.             }
    36.           ],
    37.           extra: {
    38.             text: 'text',
    39.             methods: (item, index) => {
    40.               console.log(item, index);
    41.             }
    42.           },
    43.  
    44.  
    45.         },
    46.       ],
    47.       renderData: {
    48.         AccountId: "1",
    49.         AccountName: "张三",
    50.         image: 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png',
    51.         status: '开启',
    52.         list: [
    53.           { asList: "5" },
    54.           { status: "5" },
    55.           { asList: "5" },
    56.         ],
    57.         obj: {
    58.           age: 8,
    59.           name: 'zs',
    60.           sex: 'nan',
    61.         }
    62.       },
    63.     }
    64.   },
    65. };
    66. </script>

  • 相关阅读:
    Java 正则表达式
    电脑网速慢怎么解决？推荐这3个方法
    【OpenCV + Qt】 图像处理操作
    SpringBoot整合SpringSecurity [超详细] (二)获取用户信息
    深入Django项目实战与最佳实践
    dump_stack()
    无缝数据传输：StreamSet安装部署的最佳实践
    Jenkins 配置 WebHooks
    五、Javascript DOM操作
    非金属管道探测仪 TFN HD15D 智能燃气PE管道定位仪 地下非金属管线探测仪
  • 原文地址：https://blog.csdn.net/qq_63358859/article/details/132948540