浅谈对象数据赋值问题---我遇到的一个坑

最新推荐文章于 2022-06-22 09:12:28 发布
最新推荐文章于 2022-06-22 09:12:28 发布
阅读量730 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40372395/article/details/89926392
版权
在大型网站表格导入时，由于忽视了一个关键代码，导致2000人的报名数据出现问题。本文通过分享这段经历，探讨了在处理表格数据时关于对象赋值的常见陷阱，并提醒开发者注意避免此类错误。
摘要由CSDN通过智能技术生成

今天在做一个大型网站表格导入的时候，我踩了一个坑，让宝宝我好忧伤，感觉智商的倒退

看到这个数据重复的问题，还以为我没错，结果狠狠打脸啊，伤心的不要不要的

话不多说，上代码，看看我的问题，以后要少犯类似的问题

<html>

 

<head>

<meta charset="utf-8">

<title>活动管理</title>

<link rel="stylesheet" type="text/css" href="{ {PATH_TML}}activity/css/iview.css">

<script type="text/javascript" src="{ {PATH_TML}}activity/js/vue.min.js"></script>

<script type="text/javascript" src="{ {PATH_TML}}activity/js/iview.min.js"></script>

<link rel="stylesheet" type="text/css" href="{ {PATH_TML}}activity/css/public.css">

<script src="{ {PATH_TML}}activity/js/jquery-1.8.3.min.js"></script>

<script src="{ {PATH_TML}}activity/js/activity-public.js"></script>

<script src="{ {PATH_TML}}activity/js/jquery-3.2.1.min.js"></script>

<!-- 导入excel -->

<script src="{ {PATH_TML}}activity/js/xlsx.core.min.js"></script>

<script src="/common/layui/layui.js"></script>

<!-- <script src="{ {PATH_TML}}activity/js/Blob.js"></script>

<script src="{ {PATH_TML}}activity/js/Export2Excel.js"></script> -->

<!-- 引入页面 -->

<!--<script src='js/public.js'></script>-->

<style>

[v-cloak] {

display: none !important;

}

 

.ivu-select {

margin: 0 auto;

}

</style>

</head>

 

<body>

<!-- 主题内容 -->

<div id="app" v-cloak>

<!-- 左边导航 -->

<#include#>activity/left_nav.html</#include#>

<!-- 右边内容 -->

<div class='right-content' style="flex:1">

<!-- 头部导航栏 -->

<#include#>activity/header.html</#include#>

<!-- content -->

<div class='content main'>

<!-- 打开页面选择器 -->

<div class="tag-nav-wrapper m-activity-detail">

<#include#>activity/activity_right.html</#include#>

<!-- 主题内容 -->

<div class="content-wrapper ivu-layout-content">

<div class="ivu-card ivu-card-bordered">

<div class="ivu-card-body">

<span id='mainContent' class="ivu-card">

<!--筛选按钮-->

<i-form ref="formValidate" class="shaixuan-form" inline>

<form-item>

<i-input

v-model='search_status=="is_audit"?(search_context==1?"审核通过":search_context==2?"待审核":"审核拒绝"):search_context'

:disabled='search_disabled'>

<i-select slot="prepend" style="width: 80px" @on-change='searchChange'>

<i-option value="name" key='name'>姓名</i-option>

<i-option value="telphone" key='telphone'>手机号</i-option>

<i-option value="success" key='success'>通过</i-option>

<i-option value="fail" key='success'>拒绝</i-option>

<i-option value="await" key='await'>待审核</i-option>

</i-select>

<i-button slot="append" icon="ios-search" @click='searchHandler'></i-button>

</i-input>

</form-item>

<form-item>

<i-button type="primary" @click='exportExcel("current")'>导出当前页</Button>

</form-item>

<form-item>

<i-button type="primary" @click='exportExcel("all")'>导出全部</Button>

</form-item>

<form-item v-if='activity_info.model_type=="qinshang"'>

<a href="javascript:;" class="file">导入表格

<input type="file" οnchange="importXlsx(this)" id="rcDialogTitle0">

</a>

</form-item>

<form-item v-if='activity_info.model_type=="qinshang"'>

<i-button type="primary" @click='other_enroll=true'>替他人报名</Button>

</form-item>

<form-item v-if='activity_info.model_type=="qinshang"'>

<a href="javascript:;" class="file">表格报名

<input type="file" οnchange="importEnroll(this)" id="rcDialogTitle0">

</a>

</form-item>

<form-item>

<i-button type="primary" @click='showGroup'>创建分组</Button>

</form-item>

</i-form>

<!-- -->

<!--表格-->

<i-table ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"

:data="tableData" :loading="loading" id='active-detail'>

</i-table>

<!-- 替他人报名 模态框 -->

 

<Modal v-model="other_enroll">

<p slot="header" class="import-tables">

替他人报名

</p>

<div>

<i-form :model="enroll" :label-width="80">

<form-item label="姓名" prop="name">

<i-input v-model="enroll.name" placeholder=""></i-input>

</form-item>

<form-item label="手机号" prop="telphone">

<i-input v-model="enroll.telphone" placeholder=""></i-input>

</form-item>

<form-item label="单位及职务" prop="position_info">

<i-input v-model="enroll.extends.position_info" placeholder=""></i-input>

</form-item>

<form-item label="性别" prop="sex">

<Radio-group v-model="enroll.extends.sex">

<Radio label="男"></Radio>

<Radio label="女"></Radio>

</Radio-group>

</form-item>

<form-item label="证件类型" prop="credentials_type">

<Radio-group v-model="enroll.extends.credentials_type">

<Radio label="身份证"></Radio>

<Radio label="护照"></Radio>

</Radio-group>

</form-item>

<form-item :label="enroll.extends.credentials_type" prop="card_type">

<i-input v-model="enroll.extends.credentials_number" placeholder=""></i-input>

</form-item>

<form-item label="参加考察活动" prop="enroll">

<i-switch v-model="enroll.extends.has_project" />

</form-item>

<form-item label="在陕有投资" prop="is_part_in_third_silk_conference">

<i-switch v-model="enroll.extends.is_part_in_third_silk_conference" />

</form-item>

<form-item label="大会接机" prop="card_type">

<i-switch v-model="enroll.extends.is_meet_plane" />

</form-item>

<form-item label="接机信息" prop="card_type" v-if='enroll.extends.is_meet_plane'>

<i-input v-model="enroll.extends.flight_info" placeholder="" type='textarea'></i-input>

</form-item>

</i-form>

</div>

<div slot="footer">

<i-button type="warning" @click='other_enroll=false'>取消</i-button>

<i-button type="primary" @click='otherEnroll'>添加</i-button>

</div>

</Modal>

<!-- 模态框 -->

<Modal v-model="is_apply" width="520">

<p slot="header">

<span class="ant-modal-title" id="rcDialogTitle0">报名人信息审核</span>

</p>

<div style="text-align:center" v-if='activity_info.model_type=="qinshang"'>

<div class="ant-modal-body">

<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;">

<div class="ant-col-10"

style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">姓名：

</div>

<div class="ant-col-14">{ {model_show.name}}</div>

</div>

<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;">

<div class="ant-col-10"

style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">联系方式：

</div>

<div class="ant-col-14">{ {model_show.telphone}}</div>

</div>

<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;"

v-if='model_show.extends!=null'>

<div class="ant-col-10"

style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">性别：

</div>

<div class="ant-col-14">{ {model_show.extends.sex==3?'男':model_show.extends.sex==2?'女':'未知'}}

</div>

</div>

<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;"

v-if='model_show.model_type=="qinshang"'>

<div class="ant-col-10"

style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">所属公司及职务：

</div>

<div class="ant-col-14">{ {model_show.extends.position_info}}</div>

</div>

<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;"

v-if='model_show.model_type!="qinshang"'>

<div class="ant-col-10"

style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">所属公司：

</div>

<div class="ant-col-14">{ {model_show.company}}</div>

</div>

<div class="ant-row" style="margin-bottom: 10px; font-si

最低0.47元/天 解锁文章
花式之恋——cookie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈vue获得后台数据无法显示到table上面的坑
10-14
在创建Vue实例时，通常会定义一个`data`对象，其中包含需要在视图中显示的数据。例如： ```javascript new Vue({ el: '#app', data: { uList: [], }, created: function() { var arr = this; axios.get(...
从接口获取的数据同时赋值给两个变量,改变其中一个变量时，另一个变量的值也会改变
half_sugar的博客
11-04 2880
从接口获取的数据同时赋值给两个变量,改变其中一个变量时,另一个变量的值也会跟着改变导致这个问题的原因是js中有两种数据类型：基本数据类型和引用数据类型。 而引用数据类型赋值时保存的只是一个指针,指向存储在堆中的对象.所以两个变量实际上是引用的同一个对象,当其中一个改变时,另一个当然会改变了. 解决方法就是进行深度复制,因为拷贝...
VUE动态绑定v-model变量（ui框架iview）
qq_39809160的博客
05-13 7367
需求 最近在学习vue技术，开发表格的时候，想把表格做成组件，那查询条件就需要动态生成，这就遇到一个问题，vue怎么动态给v-model变量值。 UI框架使用的是iview 页面渲染（子组件） <div class="ivu-card-body"> <Form ref="formInline" v-model="formInline" inline> <Row type="flex" justify="end" align="middle"
解决iview和elementUI组件样式覆盖无效的方法
热门推荐
前端开发
11-09 1万+
iview和elementUI是我们在用vue开发项目时比较常用到的ui组件，在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改。 为了vue页面样式模块化，不对全局样式造成污染，我们往往都会加入scoped属性用来限制样式的作用域，然而这也会导致当我们修改部分ui组件样式失效。为了避免这种情况，我们常用以下方式来解决。 一、新建一个不含scoped的style标签覆盖组件样式 不...
js对象赋值问题(对象赋值影响原对象、对象赋值后原对象值随之变化)
我总是词不达意的博客
06-22 8824
js 对象赋值问题(对象赋值影响原对象)、对象赋值后原对象值随之变化、
对象的赋值
寻玉
08-17 3536
对象的赋值如果对一个类定义了两个或多个对象，则这些对象之间是可以进行赋值，或者说，一个对象的值可以赋值给另一个同类的对象。这里所指的值是指对象中所有数据的成员的值。对象之间进行赋值是“=”进行的，对象赋值的形式如下： 对象名1=对象名2; #include <iostream> using namespace std; class Box { pub
浅谈Python 列表字典赋值的陷阱
09-19
- **浅拷贝**：当创建一个对象的浅拷贝时，新对象包含原始对象的引用而不是原始对象本身的数据。这意味着对于可变对象（如列表、字典等），原始对象和其浅拷贝会在内存中指向同一个位置，任何一方的修改都会影响到另...
浅谈java对象之间相互转化的多种方式
08-24
Java 对象之间相互转化是指将一个 Java 对象转换为另一个 Java 对象的过程。这种转换在实际开发中非常重要，因为它可以帮助我们实现对象之间的数据交换和复制。在本文中，我们将介绍四种不同的 Java 对象之间相互...
浅谈js中对象的使用
10-21
`Object`是JavaScript中的一个内置构造函数，使用`new Object()`即可创建一个空对象。字面量方式实际上是一种特殊的构造函数方式，因为字面量本质上是`new Object()`的简写形式。 创建对象之后，我们需要访问这些...
浅谈关于iview表单验证的问题
10-17
iview是一个基于Vue.js的前端UI框架，它提供了一套丰富的组件库，可以帮助开发者快速构建美观的界面。iview中的表单验证是其组件库中不可或缺的一部分，尤其在处理数据提交前的合法性校验中扮演了重要角色。本文主要...
ant-design 实现 搜索功能
weixin_33813128的博客
09-19 6787
1.逻辑代码 list.js /** * 用户列表页 */ import React,{ PureComponent } from 'react' import {connect} from 'react-redux' import {history} from '../../store' import styles from './index.less' import { Row, Col...
js 引用数据类型赋值时没有深拷贝后console.log出现的问题（对象中的对象赋值给一个变量）
PrimaryColor
02-27 371
示例： let obj={ age:1, head:{ width:100 } }; console.log("obj赋值前的width：",obj); let info=obj.head; info.width=30; console.log("obj赋值后的width：",obj); 以上代码，我们会以为obj的第一次打印，width为100，而obj的第二次打印，width为30。而结果却是： 如果直接打印对象的具体属性，那么结果就是正确的： l
JavaScript断点调试与console.log(..)输出不一致
gz-郭小敏的博客
11-30 561
此情况多出现在对象赋值前后进行console.log(…) 打印结果会随机
数据对象赋值
尘微的博客
03-04 241
最近发现一个很有意思的现象，如下： public static void main(String args[]){ Object d=new Double(2.36); Object[] o=new Object[6]; d=5D; o[0]=d; d=9f; System.out.printl
JavaScript 踩坑：对象赋值如何能够做到不影响原对象
(ÒωÓױ)
07-17 1万+
一、引言 最近在写微信小程序项目的时候，第一次接触到了 JavaScript。 于是乎，在一个场景中，我写了如下的代码： var a = {'name': 'wangying'}; var b = a; b.name = 'yingwang'; console.log(a.name); 结果我惊喜的发现，a 对象里面的 name 居然 也变成了 yingwang。 这是为什么呢？ ...
@Column注解无效
weixin_43888133的博客
05-28 3254
https://blog.csdn.net/qq_41790332/article/details/84590036
复制对象重新赋值不改变原对象
lotte
05-17 1万+
// 直接赋值 var obj1 = { a: 1 };var obj2 = obj1; console.log(obj2); // { a: 1 } // 通过 Object.assign() 这个属性来进行复制 var obj = { a: 1 };var obj2 = Object.assign({}, obj); console.log(obj2); // { a: 1 } // 通过 f...
vue显示性别0、1为男、女。filter过滤器方法
monody666的博客
02-26 1万+
<el-table-column prop="salarySex" label="性别" align="center"> <template slot-scope="scope"> <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 用|分割，前面获取传给后面，然后通过filters获取 --> .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值