您现在的位置是:首页 > Javascript
当前栏目
vue2使用element UI中Descriptions组件的遍历问题
2023-03-31 10:41:18 时间
需求描述:展示信息时其中部门区域是未知数量的,需要通过遍历进行展示。如下图举例,其中地址和备注是一一对应关系,需遵循该样式。
问题描述:起初我在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; } } }
相关文章
- 【JS 逆向百例】反混淆入门,某鹏教育 JS 混淆还原
- 微服务架构中,二次浅封装实践
- 在vue中解析md文档并显示
- 越写悦快乐之Vue项目如何集成EventBusVue Bus
- 搭建调试环境
- SpringBoot整合JPA+人大金仓(kingbase8)
- Spring Boot 中文参考指南
- ftp上传后显示网站正在建设中怎么办?ftp上传文件需要多久?
- EasyCVR人脸识别框在播放器上显示及消失的机制设定
- 建设网站怎么设置页脚 页脚和页眉的区别
- A站、B站、C站、D站、E站、F站、G站、H站、I站、J站、K站、L站、M站、N站、O站、P站、Q站、R站、S站、T站、U站、V站、W站、X站、Y站、Z站都是什么网站?Q站是什么?
- SpringBoot社区版专业版带你配置热部署
- 喜洋洋大战灰太狼
- 喜洋洋大战灰太狼(大结局)
- 官方案例--Survival Shoot(一)
- Springboot处理Date类型 返回时间戳或者日期类型
- 免费基于springboot的OA自动化办公系统,挺漂亮的
- Nodejs实现图片的上传、压缩预览、定时删除。
- 【CSDN学院出品】 你不可不知的JS面试题(分期更新……)
- 你要的几个JS实用工具函数(持续更新)