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

获取到的数据类型为

处理后的数据类型为

相关推荐
m0_708830967 分钟前
C++中的享元模式实战
开发语言·c++·算法
naruto_lnq14 分钟前
分布式计算C++库
开发语言·c++·算法
m0_7066532338 分钟前
模板编译期排序算法
开发语言·c++·算法
历程里程碑39 分钟前
Linxu14 进程一
linux·c语言·开发语言·数据结构·c++·笔记·算法
木井巳43 分钟前
【递归算法】验证二叉搜索树
java·算法·leetcode·深度优先·剪枝
m0_561359671 小时前
嵌入式C++加密库
开发语言·c++·算法
近津薪荼1 小时前
优选算法——双指针专题7(单调性)
c++·学习·算法
j445566111 小时前
C++中的职责链模式实战
开发语言·c++·算法
m0_686041611 小时前
实时数据流处理
开发语言·c++·算法
波波侠81 小时前
代码随想录算法训练营打卡第31天|56. 合并区间、738.单调递增的数字
算法