elementUI 走马灯两侧按钮向外 - 走马灯多个数据时对数组的处理

1.1效果展示

修改前：

修改后：

1.2代码

2.1模拟一个多维数组

let dataList = [{name: 'lucy',age: 22,memeroys: [{area: '广州',photos: [{name: '广州塔',src: '111.src'}, {name: '天后宫',src: '112.src'}, {name: '白云山',src: '113.src'}, {name: '虎门大桥',src: '114.src'}]}, {area: '福州',photos: [{name: '三坊七巷',src: '121.src'}, {name: '蓝眼泪海岸',src: '121.src'}, {name: '福州大学',src: '121.src'}, {name: '东街口',src: '121.src'}]}, {area: '张家界',photos: null}, {area: '长沙',photos: null}]}, {name: 'meiko',age: 25,memeroys: [{area: '仁川',photos: [{name: 's8赛场',src: '211.src'}]}]}, {name: 'maria',age: 18,memeroys: [{area: '美国',photos: null}]}, {name: 'lux',age: 15,memeroys: null}]

2.2对数组进行处理

// 判断数据组是否为空
if( dataList && dataList.length != 0) {for( let i = 0; i < dataList.length; i++ ){// 判断第i项回忆数组是否为空if( dataList[i].memeroys && dataList[i].memeroys.length != 0) {for( let j = 0; j < dataList[i].memeroys.length; j++) {// 判断该段回忆照片数组是否为空if( dataList[i].memeroys[j].photos && dataList[i].memeroys[j].photos.length != 0) {// 不为空 --> 处理照片数组let beforeArr = dataList[i].memeroys[j].photos // 用变量接收处理前数组let afterArr = [] // 处理后的二维数组let current = 0for( let k = 0; k< beforeArr.length; k++) {if (k === 0 || k % 3 !== 0) {   //数据处理成几张展示if (!afterArr[current]) {afterArr.push([beforeArr[k]])} else {afterArr[current].push(beforeArr[k])}} else {current++afterArr.push([beforeArr[k]])}}// 赋值给原数组dataList[i].memeroys[j].photos = [...afterArr]}}}}
}console.log('处理后的数组 = ',dataList)

2.3封装数组写法

let splicArr = (beforeArr) => {// 不为空 --> 处理照片数组let afterArr = [] // 处理后的二维数组let current = 0for( let k = 0; k< beforeArr.length; k++) {if (k === 0 || k % 3 !== 0) {    //数据处理成几张展示if (!afterArr[current]) {afterArr.push([beforeArr[k]])} else {afterArr[current].push(beforeArr[k])}} else {current++afterArr.push([beforeArr[k]])}}return afterArr
}
// 判断数据组是否为空
if( dataList && dataList.length != 0) {for( let i = 0; i < dataList.length; i++ ){// 判断第i项回忆数组是否为空if( dataList[i].memeroys && dataList[i].memeroys.length != 0) {for( let j = 0; j < dataList[i].memeroys.length; j++) {// 判断该段回忆照片数组是否为空if( dataList[i].memeroys[j].photos && dataList[i].memeroys[j].photos.length != 0) {dataList[i].memeroys[j].photos = [...splicArr(dataList[i].memeroys[j].photos)]}}}}
}
console.log('处理后的数组 = ',dataList)

elementUI 走马灯两侧按钮向外 - 走马灯多个数据时对数组的处理相关推荐

MySQL 数据库添加数据时为什么会产生外码（外键）约束？原理就是什么？如何解决？
文章目录前言一.插入新数据时报错外键约束? 二.对于出错 SQL 语句的分析三.对于外码约束的分析四.如何处理外键约束? 总结前言我们在使用 MySQL 数据库时,添加数据如果设计不合理很 ...
mysql添加数据不阻塞_主键表插入数据不提交,外键表插入数据被阻塞
有客户和我说:他在含主外键的表中实验发现,在主表数据未提交,然后在外键表插入该数据数据时,出现外键表hang住现象.我开始以为是不同的会话,根据oracle数据库的一致性原则,应该新会话在外键表中不能 ...
[导入]实现删除主表数据时, 判断与之关联的外键表是否有数据引用, 有标志, 无则删除...
某个基础信息表,与系统中30多个表存在外键关系,当删除基础数据时,需要判断是否已经被用过,如果用过则更改标志位,如果没有用过则直接删除,如何能很好实现这个处理?最好能够自动适应表的变化文章来源:ht ...
elementUI分页删除最后一页数据时跳转回上一页并且el-table序号递增
elementUI分页删除最后一页数据时跳转回上一页 queryParams: {current: 1,//当前页数size: 10,//每页条数channel: undefined,}, const ...
路由器怎么知道外网返回的数据包发给局域网中哪台主机呢？
这个已经困扰了我很久的问题,今天终于把它查出来了,拖延症啊..... 首先内网中的客户端将数据包传送给路由器,路由器解析数据包后发现,这个数据包是送给外网的.例如这个数据包的源IP:192.168.1 ...
java 正则括号外_正则表达式匹配括号外的符号及数据
正则表达式匹配括号外的符号 [\\?!/\\.,\\s]+(?=[^\\)]*(\\(|$)) 将括号外的?!/.,和空格(连续多个时同时)匹配如 String string1 = "sd ...
MySQL中包含外键无法删除数据的解决方案
1.在数据库连接信息加入以下代码,意思就是允许执行多语句查询. allowMultiQueries=true 2.在删除语句前面加上SET FOREIGN_KEY_CHECKS=0; 意思就是取消My ...
unity | EventTrigger(Button按钮按下、抬起等时执行的方法)
一.常用按钮按钮组件一般只有当点击时,执行的方法. 点击:需要按下再起来二.按钮的其他用法但有时候,我们可能只需要按下的时候执行,或者抬起的时候执行,这时需要在加入按钮组件的时候,再加一个 &l ...
bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [{checkbox:true //第一列显示复选框 },...{field: 'fail_num',title: '失败数'},{field: 'operate',ti ...

elementUI 走马灯两侧按钮向外 - 走马灯多个数据时对数组的处理

1.1效果展示

1.2代码

2.1模拟一个多维数组

2.2对数组进行处理

2.3封装数组写法

elementUI 走马灯两侧按钮向外 - 走马灯多个数据时对数组的处理相关推荐

最新文章

热门文章