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

获取到的数据类型为

处理后的数据类型为

相关推荐
骑自行车的码农3 小时前
🍂 React DOM树的构建原理和算法
javascript·算法·react.js
CoderYanger3 小时前
优选算法-优先级队列(堆):75.数据流中的第K大元素
java·开发语言·算法·leetcode·职场和发展·1024程序员节
希望有朝一日能如愿以偿3 小时前
力扣每日一题:能被k整除的最小整数
数据结构·算法·leetcode
Controller-Inversion3 小时前
力扣53最大字数组和
算法·leetcode·职场和发展
rit84324993 小时前
基于感知节点误差的TDOA定位算法
算法
m0_372257023 小时前
ID3 算法为什么可以用来优化决策树
算法·决策树·机器学习
q***25214 小时前
SpringMVC 请求参数接收
前端·javascript·算法
数模加油站4 小时前
25认证杯C题成品论文第一弹【冲奖硬核+无盲点解析】
算法·数学建模·认证杯·25认证杯
MobotStone4 小时前
数字沟通之道
人工智能·算法
点云SLAM4 小时前
Boost库中Math 模块的插值(interpolation使用和示例
算法·插值·boost库·b-spline·akima 样条·单调三次样条·barycentric 插值