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

获取到的数据类型为

处理后的数据类型为

相关推荐
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
~|Bernard|8 小时前
在 PyCharm 里怎么“点鼠标”完成指令同样的运行操作
算法·conda
战术摸鱼大师8 小时前
电机控制(四)-级联PID控制器与参数整定(MATLAB&Simulink)
算法·matlab·运动控制·电机控制
Christo38 小时前
TFS-2018《On the convergence of the sparse possibilistic c-means algorithm》
人工智能·算法·机器学习·数据挖掘
好家伙VCC9 小时前
数学建模模型 全网最全 数学建模常见算法汇总 含代码分析讲解
大数据·嵌入式硬件·算法·数学建模
liulilittle10 小时前
IP校验和算法:从网络协议到SIMD深度优化
网络·c++·网络协议·tcp/ip·算法·ip·通信
bkspiderx12 小时前
C++经典的数据结构与算法之经典算法思想:贪心算法(Greedy)
数据结构·c++·算法·贪心算法
中华小当家呐13 小时前
算法之常见八大排序
数据结构·算法·排序算法
沐怡旸13 小时前
【算法--链表】114.二叉树展开为链表--通俗讲解
算法·面试
tju新生代魔迷14 小时前
数据结构:双向链表
数据结构·链表