如图： 实现下面数据

 spanCol24  数组存放需要单独展示一行的变量名

objSort  对显示循序进行排序

objMap 渲染的循环的key-'字段名字'

  <template>
        <el-row class="dialog-row" type="flex">
          <el-col v-for="(item,index) in objSort" :key="index" :span="spanCol24.includes(item) ? 24 : 12">
            <div class="col">
                  <span class="col-title">{{ objMap[item] }}</span>
                <span class="col-content">{{ detail[item] || '/' }}</span>
              </div>
           </el-col>
            </el-row>
  </template>

                detail: {},
                spanCol24: ['executeScheme', 'relevancyName', 'analyse', 'executeScheme'],
                userInfo: {
                    time: '2022-07-04 16:30:38',
                    user: '用户名'
                },
                objMap: {
                    budgetTypeName: '预算类型',
                    budget: '批复预算',
                    relevancyName: '设备/设施',
                    facilityInfo: '设备信息',
                    executeCaus: '实施原因',
                    executeScheme: '实施方案',
                    executeWayName: '实施方式',
                    isEnergyName: '容是否为节能技改项目',
                    analyse: '经济性分析',
                    isMeterName: '是否为自控仪表',
                    isSafeName: '是否为安全消缺',
                    effectiveDate: '计划实施日期',
                    receptionDate: '计划完成日期'
                },
 objSort: ['budgetTypeName', 'budget', 'relevancyName', 'facilityInfo', 'executeCaus', 'executeScheme', 'executeWayName', 'isEnergyName', 'analyse', 'isMeterName', 'isSafeName', 'effectiveDate', 'receptionDate'],

后台返回的数据

样式：

.dialog-row {
    border: 1px solid #edeff2;
    border-bottom: none;
    display:flex;
    flex-wrap:wrap;
    font-size:14px;
    .col {
        display: flex;
        height: 100%;
        min-height:40px;
        border-bottom: 1px solid #edeff2;
        .col-title {
            width: 172px;
            display: flex;
            align-items: center;
            height: auto;
            overflow: hidden;
            color: #3C4658;
            font-weight: 500;
            padding-left: 10px;
            background: #f7f8fa;
        }
        .col-content {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
            overflow: hidden;
            color: #12171f;
        }
    }
}