发布时间:2023-04-23 文章分类:WEB开发, 电脑百科 投稿人:赵颖 字号: 默认 | | 超大 打印

需求描述:展示信息时其中部门区域是未知数量的,需要通过遍历进行展示。如下图举例,其中地址和备注是一一对应关系,需遵循该样式。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是没有被识别出来。所以更不会遍历渲染。

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

 处理办法:使用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>

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

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

以下为其他思考解决方式(不推荐)

例:[{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>