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

获取到的数据类型为

处理后的数据类型为

相关推荐
XFF不秃头2 小时前
力扣刷题笔记-旋转图像
c++·笔记·算法·leetcode
王老师青少年编程2 小时前
csp信奥赛C++标准模板库STL案例应用3
c++·算法·stl·csp·信奥赛·lower_bound·标准模版库
有为少年3 小时前
Welford 算法 | 优雅地计算海量数据的均值与方差
人工智能·深度学习·神经网络·学习·算法·机器学习·均值算法
Ven%3 小时前
从单轮问答到连贯对话:RAG多轮对话技术详解
人工智能·python·深度学习·神经网络·算法
山楂树の3 小时前
爬楼梯(动态规划)
算法·动态规划
谈笑也风生3 小时前
经典算法题型之复数乘法(二)
开发语言·python·算法
智算菩萨3 小时前
强化学习从单代理到多代理系统的理论与算法架构综述
人工智能·算法·强化学习
lhn3 小时前
大模型强化学习总结
算法
Gigavision4 小时前
MMPD数据集 最新Mamba算法 源码+数据集 下载方式
算法