vue-template模板渲染object对象并显示出键值对-非数组-data和computed的配合使用

主要需求：

有这个需求主要因为字符串模板如果渲染的对象键值对过多，html会特别冗余，想简化html

比如如果想要渲染下面对象或更长对象：

detailDate:{//展示层详情信息
        userName:"王湾",//姓名
        sex:"男",//性别
        birthDay:"1991-09-09",//出生日期
        age:"22",//年龄
        bornAddress:"湖北",//籍贯
        height:"180",//身高
        weight:"150",//体重
        authorized:"在编",//编制
        mobile:"13239400222",//手机
        workPlace:"行政",//工作单位
        prettyDescribe:"",//颜值
        graduateSchool:"",//毕业院校
        hobby:"",//爱好
        disposition:"",//性格
        education:"",//初中1、中专2、高中3、大专4、本科5、硕士6、博士7
        pIncumbency:"",//现任职务
        ePosition:"",//职位
        belongingAreaId:"",//所属区域id
        attentionStatus:"",//0未被红娘关注1已关注
        examines:"",//数据被查看次数
        createTime:"",//添加时间
        withoutChildren:"",//value="有无子女1:有0:没有"
        marriageStatus:"",//婚姻情况 (单身1、离异未育2、离异有子3、丧偶4)
        ...
      },

template就得写很多

<el-row>
                <el-col :span="6">
                  <div class="grid-content">
                     姓名 ：
                  </div>
                  </el-col>
                <el-col :span="18">
                  <div class="grid-content">
                      {{data.userName}}
                  </div>
                  </el-col>
              </el-row>
<el-row>
                <el-col :span="6">
                  <div class="grid-content">
                     姓名 ：
                  </div>
                  </el-col>
                <el-col :span="18">
                  <div class="grid-content">
                      {{data.userName}}
                  </div>
                  </el-col>
              </el-row>
...

想要简化，直接用数组遍历的方式肯定不行，因为这是个对象。那就结合computed对对象进行操作：

 <!-- 说明：  说明内容 -->
            <div class="textcontent" v-for="(item,i) in detailDateArr" :key="i">
              <el-row>
                <el-col :span="6">
                  <div class="grid-content">
                      {{item.name}} ：
                  </div>
                  </el-col>
                <el-col :span="18">
                  <div class="grid-content">
                      {{item.value}}
                  </div>
                  </el-col>
              </el-row>
            </div>

detailDate:{//展示层详情信息
        userName:"王湾",//姓名
        sex:"男",//性别
        birthDay:"1991-09-09",//出生日期
        age:"22",//年龄
        bornAddress:"湖北",//籍贯
        height:"180",//身高
        weight:"150",//体重
        authorized:"在编",//编制
        mobile:"13239400222",//手机
        workPlace:"行政",//工作单位
        prettyDescribe:"",//颜值
        graduateSchool:"",//毕业院校
        hobby:"",//爱好
        disposition:"",//性格
        education:"",//初中1、中专2、高中3、大专4、本科5、硕士6、博士7
        pIncumbency:"",//现任职务
        ePosition:"",//职位
        belongingAreaId:"",//所属区域id
        attentionStatus:"",//0未被红娘关注1已关注
        examines:"",//数据被查看次数
        createTime:"",//添加时间
        withoutChildren:"",//value="有无子女1:有0:没有"
        marriageStatus:"",//婚姻情况 (单身1、离异未育2、离异有子3、丧偶4)
        
      },

computedate对对象进行操作

computed:{
    detailDateArr(){
      return [
        {name:"姓名",keym:"userName",value:this.detailDate.userName},
        {name:"性别",keym:"sex",value:this.detailDate.sex},
        {name:"出生日期",keym:"birthDay",value:this.detailDate.birthDay},
        {name:"年龄",keym:"age",value:this.detailDate.age},
        {name:"籍贯",keym:"bornAddress",value:this.detailDate.bornAddress},
        {name:"身高",keym:"height",value:this.detailDate.height},
        {name:"体重",keym:"weight",value:this.detailDate.weight},
        {name:"编制",keym:"authorized",value:this.detailDate.authorized},
        {name:"手机",keym:"mobile",value:this.detailDate.mobile},
        {name:"工作单位",keym:"workPlace",value:this.detailDate.workPlace},
        {name:"颜值",keym:"prettyDescribe",value:this.detailDate.prettyDescribe},
        {name:"毕业院校",keym:"graduateSchool",value:this.detailDate.graduateSchool},
        {name:"爱好",keym:"hobby",value:this.detailDate.hobby},
        {name:"性格",keym:"disposition",value:this.detailDate.disposition},
        {name:"学历",keym:"education",value:this.detailDate.education},
        {name:"现任职务",keym:"pIncumbency",value:this.detailDate.pIncumbency},
        {name:"职位",keym:"ePosition",value:this.detailDate.ePosition},
        {name:"所属区域id",keym:"belongingAreaId",value:this.detailDate.belongingAreaId},
        {name:"红娘关注",keym:"attentionStatus",value:this.detailDate.attentionStatus},
        {name:"查看次数",keym:"examines",value:this.detailDate.examines},
        {name:"添加时间",keym:"createTime",value:this.detailDate.createTime},
        {name:"有无子女",keym:"withoutChildren",value:this.detailDate.withoutChildren},
        {name:"婚姻情况",keym:"marriageStatus",value:this.detailDate.marriageStatus},
      ]
    }
  },