解决两个不同数组对象之间的赋值问题

最新推荐文章于 2024-07-26 15:05:55 发布
最新推荐文章于 2024-07-26 15:05:55 发布
阅读量101 收藏
点赞数 1
分类专栏： VUE3 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49352307/article/details/140675359
版权

利用后端传来的数组对象,与前端的数组对象不符合，进行处理赋值。从而能遍历动态生成每一项。 

const res=[
    {
        "id": 22,
        "itemName": 38,
        "itemValue": {
            "money": "12",
            "conditionOne": "1|1|8",
            "conditionTow": "3|3|4",
            "conditionThree": "2|2|6"
        }
    },
    {
        "id": 23,
        "itemName": 38,
        "itemValue": {
            "money": "12",
            "conditionOne": "2|8|0",
            "conditionTow": "10|0|0",
            "conditionThree": "0|10|0"
        }
    }
]
const list=ref([])
const gettfmsg = async (obj: any) => {
    const res = await GetTFsetListtAPI(obj)
    tablelist.value = res.lists
    listlength.value = res.lists.length
    for (let index = 0; index < listlength.value; index++) {
        const obj = {
            id: res.lists[index].id,
            type1: res.lists[index].itemName,
            type2: res.lists[index].itemValue.money,
            can1: res.lists[index].itemValue.conditionOne.split('|')[0],
            can2: res.lists[index].itemValue.conditionOne.split('|')[1],
            can3: res.lists[index].itemValue.conditionOne.split('|')[2],
            can4: res.lists[index].itemValue.conditionTow.split('|')[0],
            can5: res.lists[index].itemValue.conditionTow.split('|')[1],
            can6: res.lists[index].itemValue.conditionTow.split('|')[2],
            can7: res.lists[index].itemValue.conditionThree.split('|')[0],
            can8: res.lists[index].itemValue.conditionThree.split('|')[1],
            can9: res.lists[index].itemValue.conditionThree.split('|')[2]
        }
        list.value.push(obj)
    }

    console.log('列表数据', res)
    console.log('列表长度', res.lists.length)
}

 动态生成每一项

  <div v-for="(item, index) in list" :key="index" class="mt-5">
                    <el-form ref="form" size="large">
                        <el-collapse-item :title="`投放费配置项${index + 1}`" :name="index">
                            <!-- 投放类型与基础投放费 -->
                            <div class="flex">
                                <el-form-item label="投放类型：" style="margin-left: 20px">
                                    <el-select
                                        v-model="item.type1"
                                        placeholder="请选择"
                                        style="width: 240px"
                                    >
                                        <el-option
                                            v-for="item in options1"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="基础投放费:" style="margin-left: 20px">
                                    <el-input
                                        style="width: 200px"
                                        v-model="item.type2"
                                        placeholder="请输入投放费"
                                        ><template #append>元 / 张</template></el-input
                                    >
                                </el-form-item>
                            </div>
                            <!-- 无条件 -->
                            <div class="flex justify-around items-center">
                                <el-form-item
                                    label="无条件投放分配比例:广告分发商占比"
                                    prop="name"
                                    style="margin-left: 84px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can1"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label=" 平台占比"
                                    prop="name"
                                    style="margin-left: 20px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can2"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label=" 广告消费用户占比"
                                    prop="name"
                                    style="margin-left: 20px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can3"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>
                            </div>
                            <!-- 符合任意1个条件投放分配比例 -->
                            <div class="flex justify-around items-center">
                                <el-form-item
                                    label=" 符合任意1个条件投放分配比例:广告分发商占比"
                                    prop="name"
                                    style="margin-left: 20px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can4"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>

                                <el-form-item
                                    label=" 平台占比"
                                    prop="name"
                                    style="margin-left: 20px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can5"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label=" 广告消费用户占比"
                                    prop="name"
                                    style="margin-left: 20px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can6"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>
                            </div>
                            <!-- 同时符合2个条件投放比例 -->
                            <div class="flex justify-around items-center">
                                <el-form-item
                                    label="同时符合2个条件投放比例:广告分发商占比"
                                    prop="name"
                                    style="margin-left: 50px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can7"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label=" 平台占比"
                                    prop="name"
                                    style="margin-left: 20px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can8"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label=" 广告消费用户占比"
                                    prop="name"
                                    style="margin-left: 20px"
                                >
                                    <el-input-number
                                        placeholder="请输入内容"
                                        style="width: 150px"
                                        v-model="item.can9"
                                        :precision="1"
                                        :step="0.1"
                                        :min="0"
                                        :max="10"
                                    />
                                </el-form-item>
                            </div>
                            <div style="text-align: center" class="mt-5 mb-5">
                                <el-button type="primary" @click="serve(item)">{{
                                    item.id ? '修改' : '保存'
                                }}</el-button>
                            </div>
                            <hr />
                        </el-collapse-item>
                    </el-form>
                </div>

Bunury
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js深度合并两个数组对象
Cahier
04-01 1629
js合并两个数组对象, 如果a中含有b,则b的值覆盖a的值 如果a中不含有b 则b的值新增到a MergeRecursive(obj1, obj2) { // 合并两个数组 for (var p in obj2) { if (obj1[p] === undefined) { // 如果obj1没有p 直接把obj2的p加入 obj1[p] = obj...
详解vue 数组和对象渲染问题
10-17
主要介绍了详解vue 数组和对象渲染问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
数组以及对象的赋值问题
flyer9651的博客
02-11 8439
昨天在开发中，要实现一个操作是把数组1赋值给数组2的操作。写了一段类似这样的代码： let arr = [10, 20, 30] let arr1 = arr arr1[2] = 90 console.log(arr, arr1, '打印的结果') //[10, 20, 90] [10, 20, 90] 我只改变了arr1的值但是arr和arr1都发生了改变。 原因是arr1 = arr 不是一个赋值操作，而是把arr的内存地址给了arr1。也就是两个数组都指向了同一个内存地址。（这里我也不
JS数组与对象赋值问题
alokka的博客
12-05 1558
最近有群友遇到一个问题 就是给数组赋值遇到的一些问题 正好自己也不了解 就去网上查了一些资料 在这里做一下总结 问题1： 把 a 赋值给 b ，改变 b 的值发现 a 的值也被改变了，这和我们想象的不一样，为什么呢？ // 1. 数组 var a = [1,2]; var b = a; b[0] = 3; console.log(a); // [3,2] // 2. 对象 var...
有关JS创建二维数组对象重复赋值的一些问题
qq_39889855的博客
09-26 1156
JS创建二维数组后动态赋值，可能会出现赋值一个元素，结果同行或全部元素都赋值的情况，可能是在创建二维数组时，元素指向了同一个对象。在使用过程中，解决的所有元素同时改变的的问题，但依旧存在同一行的元素都指向一个对象的情况。用fill赋值时也存在同一行数据同时改变的情况，所以我用了一种比较笨的办法。
JS数组中对象赋值问题(针对对象个数未知的赋值报错)
Schaffer的博客
04-14 1642
当一个数组内部元素为对象时，给数组赋值应该先给对象赋值，然后把该对象push到数组中。 在控制台打印之后的数据格式为下图所示： 如果在给数组赋值的时候直接给对象赋值则会报错，如下所示： 下面给出两种解决办法： 1、通过循环直接向每个数组元素的对象赋值 2、通过先给对象赋值，然后把对象 push 进数组的方式 ...
vue 解决数组赋值无法渲染在页面的问题
10-16
总结来说，解决Vue中数组赋值无法渲染在页面的问题，关键在于： 1. 确保`this`指向正确，尤其是在异步操作中，可以使用箭头函数保持正确的上下文。 2. 使用Vue提供的数组变异方法（如`push()`、`splice()`等）来...
js比较两个单独的数组或对象是否相等的实例代码
11-29
而数组（Array）和对象（Object）则是引用类型，它们的赋值是按引用传递的，这意味着当你比较两个数组或对象时，实际上比较的是它们在内存中的引用，而不是它们的值。 对于数组的比较，有几种常见的方法： 1. **...
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
01-21
C，C++，Java中对数组赋值时，最后一个元素末尾的逗号可有可无。下面两行代码对这些语言来说是等效的。 int a[] = {1,2,3}; /* 正确 */ int a[] = {1,2,3,}; /* 正确 */ PHP这一点也继承了C的特点，下面的两行代码...
JS实现给json数组动态赋值的方法示例
10-19
然而，需要注意的是，`JSON.parse()`返回的是一个对象，而不是数组，因此如果你尝试直接在结果上使用`push()`，会出现`push is not a function`的错误。所以，当JSON表示的是数组时，需要确保在调用`push()`之前，该...
python爬虫基础——Webbot库介绍
qq_56262770的博客
07-22 990
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 296
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 246
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 299
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 988
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 950
CTFWP，ctfshow-web42
技术实践—微前端技术应用
最新发布
iOceanMind的博客
07-26 278
微前端是一种新兴的前端架构模式，是一种类似于微服务的架构，将微服务的理念应用于浏览器端。其核心理念是将一个大而单一的前端应用拆分为多个小型独立的微应用。这些微应用各自独立，可以由不同团队开发维护，部署，组合这些微应用，行成一个聚合应用。
Spring Cloud微服务项目统一封装数据响应体
洛*璃的博客
07-26 347
在微服务架构下，处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发，统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体，并分享一些最佳实践。
前端开发知识-vue
modi000的博客
07-26 140
2.在javascript标签中创建vue对象，数据模型。一、vue可以简化前端javascript的操作。可以src中可以是vue的网址，也可以是本地下载。1.javascript中引入vue.js。主要特点是可以实现视图、数据的双向绑定。二、ngix是前端使用的主流服务器。后端使用的主流服务器是tomcat。3.在body体中，实现视图（标签）绑定。
js如何遍历两个数组对象根据相同下标赋值
05-11
可以使用for循环遍历两个数组对象，然后根据相同下标进行赋值操作。具体实现如下： ```javascript var arr1 = [{name: 'Tom', age: 20}, {name: 'Jerry', age: 22}, {name: 'Mike', age: 18}]; var arr2 = [{score: 90}, {score: 80}, {score: 95}]; for (var i = 0; i < arr1.length; i++) { arr1[i].score = arr2[i].score; } console.log(arr1); ``` 上述代码中，我们遍历了两个数组对象 arr1 和 arr2，然后根据相同下标进行赋值操作，将 arr2 中的 score 值赋值给 arr1 中的每个对象。最终输出 arr1 数组对象，可以看到新添加了一个 score 属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值