关于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> 2. 拆分展示图表。分成三部分，中间遍历部分用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;
}
}
}总结
到此这篇关于关于vue2使用element UI中Descriptions组件的遍历问题详解的文章就介绍到这了,更多相关element UI中Descriptions组件遍历内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
