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)
      })
    },

获取到的数据类型为

处理后的数据类型为

相关推荐
<但凡.2 小时前
C++修炼:list模拟实现
开发语言·数据结构·c++
songx_992 小时前
算法设计与分析7(贪心算法)
算法
aigonna2 小时前
Kimi 7B 语音转文字
算法
敲代码的瓦龙2 小时前
C++?动态内存管理!!!
c语言·开发语言·数据结构·c++·后端
Ronin3053 小时前
【C++】13.list的模拟实现
开发语言·数据结构·c++·list
weixin_435208163 小时前
图解模型并行框架
人工智能·算法·语言模型·自然语言处理·aigc
序属秋秋秋3 小时前
《数据结构初阶》【顺序表 + 单链表 + 双向链表】
c语言·数据结构·笔记·链表
东方翱翔3 小时前
第十六届蓝桥杯大赛软件赛省赛第二场 C/C++ 大学 A 组
算法·职场和发展·蓝桥杯
Blossom.1184 小时前
量子计算在密码学中的应用与挑战:重塑信息安全的未来
人工智能·深度学习·物联网·算法·密码学·量子计算·量子安全
无敌的牛4 小时前
AVL树的介绍与学习
数据结构·学习