vue2使用element UI中Descriptions组件的遍历问题

需求描述：展示信息时其中部门区域是未知数量的，需要通过遍历进行展示。如下图举例，其中地址和备注是一一对应关系，需遵循该样式。

问题描述：起初我在el-descriptions中直接使用v-for进行遍历地址和备注两个el-descriptions-item，发现页面毫无反应，不会渲染这部分。

<div v-for="item in arr" :key="item.id">
    <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-location-outline" />地址
        </template>
        {{item.city}}
    </el-descriptions-item>
    <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-tickets" />备注
        </template>
        <el-tag size="small">{{item.remarks}}</el-tag>
    </el-descriptions-item>
</div>

导致原因：打开控制台发现，这个组件是将数据渲染成了一个表格形式，放在里面的div是没有被识别出来。所以更不会遍历渲染。

** 处理办法：**使用template进行包裹遍历（注意：key要放在真实dom上）

   <template v-for="(item,ind) in arr">
      <el-descriptions-item :key="ind">
        <template slot="label">
          <i class="el-icon-location-outline" />地址
        </template>
        {{item.city}}
      </el-descriptions-item>
      <el-descriptions-item :key="ind">
        <template slot="label">
          <i class="el-icon-tickets" />备注
        </template>
        <el-tag size="small">{{item.remarks}}</el-tag>
      </el-descriptions-item>
    </template>

数据： arr: [{ city: '苏州', remarks: '学校' }, { city: '扬州', remarks: '老家' }]

以下为其他思考解决方式（不推荐）

• **1. **处理数据，不可以通过div遍历但是可以在el-descriptions-item中遍历自身。可以将传过来的数组进行拆分重新组装，之后遍历该数据。

例：[{city:'苏州',remarks:'学校'}，{city:'扬州',remarks:'老家'}] => ['苏州','学校','扬州','老家']

//遍历展示
<el-descriptions-item v-for="(item,ind) in arr" :key="ind">
      <template slot="label">
        <i class="el-icon-location-outline" />
        {{ind%2==0?'地址':'备注'}}
      </template>
      {{item}}
</el-descriptions-item> 

• 1. 拆分展示图表。分成三部分，中间遍历部分用div手写样式。（该样式需要根据需求自行调整） ```  <div class="departList">        <div v-for="(item,ind) in jointDeparts" :key="ind" class="departItem">          <div class="depart">            <div class="left">地址</div>            <div class="right">{{item.name}}</div>          </div>          <div class="type">            <div class="left">备注</div>            <div class="right">{{item.type}}</div>          </div>        </div>  </div>``````.departList {  margin: 5px 0;  width: 98% !important;  margin-left: 2% !important;  border: 1px solid #ebeef5;  .departItem {    display: flex;    div {      display: flex;      width: 50%;    }    .left {      padding: 12px 10px;      color: rgba(0, 0, 0, 0.85);      border-right: 1px solid #e5e6eb;      border-bottom: 1px solid #e5e6eb;      background: #f2f3f5;      width: 30.3%;      font-size: 14px;    }    .right {      padding: 12px 10px;      color: #606266;      border-bottom: 1px solid #e5e6eb;      font-size: 14px;      width: 70%;    }    .type {      .left {        border-left: 1px solid #e5e6eb;      }    }  }```