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

获取到的数据类型为

处理后的数据类型为

相关推荐
jamesge20102 小时前
限流之漏桶算法
java·开发语言·算法
Funny_AI_LAB2 小时前
Zcode:智谱AI推出的轻量级 AI IDE 编程利器
人工智能·python·算法·编辑器
@卞2 小时前
排序算法(3)--- 交换排序
数据结构·算法·排序算法
youngee112 小时前
hot100-55有效的括号
算法·leetcode·职场和发展
嘻嘻嘻开心2 小时前
C语言学习笔记
c语言·数据结构·算法
Blossom.1182 小时前
GPTQ量化实战:从零手写大模型权重量化与反量化引擎
人工智能·python·算法·chatgpt·ai作画·自动化·transformer
睡醒了叭3 小时前
图像分割-传统算法-区域分割
图像处理·人工智能·算法·计算机视觉
代码游侠3 小时前
复习——网络基础知识
网络·笔记·网络协议·算法·http
沈阳信息学奥赛培训3 小时前
CCF GESP 2025/12/24 模拟测试 C++ 4级 编程题2
数据结构·算法
dddddppppp1233 小时前
c 模拟一个fat16文件系统
c语言·c++·算法