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

获取到的数据类型为

处理后的数据类型为

相关推荐
2301_765703143 分钟前
C++与自动驾驶系统
开发语言·c++·算法
Ll13045252986 分钟前
Leetcode二叉树 part1
b树·算法·leetcode
鹿角片ljp8 分钟前
力扣9.回文数-转字符双指针和反转数字
java·数据结构·算法
热爱编程的小刘16 分钟前
Lesson04---类与对象(下篇)
开发语言·c++·算法
梦梦代码精43 分钟前
开源、免费、可商用:BuildingAI一站式体验报告
开发语言·前端·数据结构·人工智能·后端·开源·知识图谱
有代理ip1 小时前
成功请求的密码:HTTP 2 开头响应码深度解析
java·大数据·python·算法·php
YYuCChi1 小时前
代码随想录算法训练营第三十四天 | 62.不同路径、63.不同路径||
算法
小明同学011 小时前
[C++进阶] 深度解析AVLTree
c++·算法·visualstudio
CoderCodingNo1 小时前
【GESP】C++五级练习题 luogu-P1031 [NOIP 2002 提高组] 均分纸牌
开发语言·c++·算法
梯度下降中2 小时前
求职面试中的线代知识总结
人工智能·线性代数·算法·机器学习