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

获取到的数据类型为

处理后的数据类型为

相关推荐
Java水解12 分钟前
基于Rust实现爬取 GitHub Trending 热门仓库
数据结构·后端
亭台19 分钟前
【Matlab笔记_23】MATLAB的工具包m_map的m_image和m_pcolor区别
笔记·算法·matlab
李玮豪Jimmy20 分钟前
Day39:动态规划part12(115.不同的子序列、583.两个字符串的删除操作、72.编辑距离)
算法·动态规划
Luna-player38 分钟前
在前端中list.map的用法
前端·数据结构·list
历程里程碑1 小时前
C++ 10 模板进阶:参数特化与分离编译解析
c语言·开发语言·数据结构·c++·算法
星辞树1 小时前
从 In-context Learning 到 RLHF:大语言模型的范式跃迁
算法
再__努力1点2 小时前
【68】颜色直方图详解与Python实现
开发语言·图像处理·人工智能·python·算法·计算机视觉
mingchen_peng2 小时前
第一章 初识智能体
算法
百锦再2 小时前
国产数据库的平替亮点——关系型数据库架构适配
android·java·前端·数据库·sql·算法·数据库架构