jeecgbootvue2重新整理数组数据或者添加合并数组并遍历背景图片或者背景颜色

想要实现处理后端返回数据并处理,添加已有静态数据并遍历快捷菜单背景图

遍历数组并使用代码

需要注意:

1、静态数组的图片url需要的格式为

javascript 复制代码
require('../../assets/b.png')

2、设置遍历背景图的代码必须是:

javascript 复制代码
:style="{ 'background-image': 'url(' + item.url + ')' }"

处理数据的模块代码为

TypeScript 复制代码
getLoginfoSaveMenu() {
      getCommandsMenuForShortcut().then(response => {
        this.shortcut = response.result.shortcut
        this.shortcut.map(item => {
          this.checkedKeys.push(item.key)
        })
        this.checkeddatas = response.result.shortcut.map((item, index) => {
          return {
            color: this.appList[index % 4].color,//这个为背景颜色使用同背景图
            url: this.appimgs[index % 4].url,//为将静态图片遍历放入穿梭框内
            ...item
          }
        })
        this.targetKeys = this.checkeddatas.map(item => {
          return item.id
        })
      }).catch(error => {
        this.$message.success(error)
      })
    },

获取到的数据类型为

处理后的数据类型为

相关推荐
AuroraWanderll6 分钟前
C++类和对象--访问限定符与封装-类的实例化与对象模型-this指针(二)
c语言·开发语言·数据结构·c++·算法
月明长歌9 分钟前
【码道初阶】LeetCode 622:设计循环队列:警惕 Rear() 方法中的“幽灵数据”陷阱
java·算法·leetcode·职场和发展
Dylan的码园10 分钟前
链表与LinkedList
java·数据结构·链表
mit6.82416 分钟前
博弈-翻转|hash<string>|smid
算法
代码游侠19 分钟前
复习——Linux 系统编程
linux·运维·c语言·学习·算法
Han.miracle26 分钟前
优选算法-005 有效三角形的个数(medium)
数据结构·算法·有效的三角形个数
yuuki23323326 分钟前
【C++】类和对象下
数据结构·c++·算法
huohuopro28 分钟前
结构体与链表
数据结构·算法·链表
CoovallyAIHub29 分钟前
告别“消失的小目标”:航拍图像检测新框架,精度飙升25.7%的秘诀
深度学习·算法·计算机视觉
第二只羽毛30 分钟前
外卖订餐管理系统
java·大数据·开发语言·算法