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

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

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

    
        
        {{item.city}}
    
    
        
        {{item.remarks}}
    

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

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

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

---

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

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

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

//遍历展示

      
      {{item}}
 

•  2.     拆分展示图表。分成三部分，中间遍历部分用div手写样式。（该样式需要根据需求自行调整）

    
  
          
  
            
  
              
  地址
              
  {{item.name}}
            
            
  
              
  备注
              
  {{item.type}}
            
          
    
  
  

  .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;
        }
      }
    }