页面有新增，编辑，删除按钮，可以编辑表格中的某行数据，页面表格数据是从后台获取的，点击编辑打开dailog，将那行数据赋给ruleForm，发现Form表单无法编辑了，select多选框无法选择，删除，datepicker等组件也会出现这种不能编辑的情况。

select代码如下

<el-select style="margin:0 5px" 
	v-model="ruleForm.selectValue" 
	clearable 
	placeholder="类型">
    <el-option v-for="item in group" :key="item.value" :label="item.type" :value="item.value"></el-option>
</el-select>
后台返回数据为row，通过Object.assign进行拷贝
 
this.ruleForm = Object.assign({},row)    //this.ruleForm为表单数据，row为后台返回的数据信息
通过Object.assign直接将后台返回的数据赋值给form，后台返回的数据中没有select model 绑定的数据，而vue 无法监听动态新增的属性的变化。
 data中定义的属性为
 
ruleForm :{
   name:null,
   selectValue:null, //select绑定的值
   age:null,
   address:null
而后台返回的数据中没有selectValue属性，如下
 
temp:{
   name:null,
   age:null,
   address:null
拷贝时加上初始化时的数据格式
 
this.ruleForm = Object.assign({},this.ruleForm,row)
用 $set 来为这些属性赋值.
 
  <el-select style="margin:0 5px" 
  	v-model="ruleForm.selectValue"
  	@change="$set(ruleForm,ruleForm.selectValue,$event)" 
  	clearable 
 	placeholder="类型">
         <el-option v-for="item in group" :key="item.value" :label="item.type" :value="item.value"></el-option>
  </el-select>
浅拷贝和深拷贝
 
浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”
 
有时候希望在改变新的数组（对象）的时候，不改变原数组（对象）
 例如：var newObj = obj; newObj.xxx = xxx 实际上，newObj和obj两个引用指向的是同一个对象，修改了newObj，也就等同于修改了obj。
 
Object.assign()实现浅复制。
 
合并之后所有被合并的对象和合并的对象都会变
如果目标对象中的属性具有相同的键，则它们将被源中的属性覆盖。后来的消息来源的属性将同样覆盖较早的属性。
 
场景如下：
 
if(lable ===  '1'){
 this.first= Object.assign([],row);
}else if(lable ===  '2'){
 this.second= Object.assign([],row);
console.log(this.first) 
console.log(this.second) 
这时会发现当label为1时，this.second的值也被改写成与this.first相同的数据
 
文档中的例子
 
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);	// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);	// expected output: Object { a: 1, b: 4, c: 5 }
赋值后原本的target也发生了变化，并且b的值变为5
 因此在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}
 
Object.assign() 可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。
 
如果目标对象与源对象有同名属性，则后面的属性会覆盖前面的属性
如果只有一个参数，则直接返回该参数。即Object.assign(obj) === obj
如果第一个参数不是对象，而是基本数据类型（Null、Undefined除外），则会调用对应的基本包装类型
如果第一个参数是Null和Undefined，则会报错；如果Null和Undefined不是位于第一个参数，则会略过该参数的复制
 
  let o1 = { a: 0 , b: { c: 0}};
  let o2 = Object.assign({}, o1);
  console.log(JSON.stringify(o2)); // { a: 0, b: { c: 0}}
  o1.a = 1;
  console.log(JSON.stringify(o1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(o2)); // { a: 0, b: { c: 0}}
  o2.b.c = 3;
  console.log(JSON.stringify(o1)); // { a: 1, b: { c: 3}}//c属性也发生了改变
  console.log(JSON.stringify(o2)); // { a: 1, b: { c: 3}}
Object.assign 不会跳过那些值为 null 或 undefined 的源对象。
 
场景如下：
 
o1 = {a:1, b:null }
o2 = Object.assign(o1, {a:2,b:3} ); 	//{a: 2, b: 3}
因此一定要检查后端返回的数据里，有没有属性值为 null或者 undefined，null 和undefined 禁止出现在正常的数据格式中
                    场景：页面表格数据是从后台获取的，编辑时，将数据传给dialog，发现Form表单无法编辑了，select多选框无法选择，删除，datepicker等组件也会出现这种不能编辑的情况原因：通过Object.assign直接将后台返回的数据赋值给form，后台返回的数据结构与data中初始化的form，数据结构发生了改变解决：页面有新增，编辑，删除按钮。可以编辑表格中的某行数据，点击编辑打开d...
				
Object.assign()用法讲解
Calla_Lj 最后发布于2019-04-23 18:54:32
语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象
用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
const target = { a: 1, b: 2 };
const source...
				
复制功能，想单独去掉id不传过去，思路设置局部变量，把整个row对象赋值给newData变量，使用 Object.assign({}, row)；使用delete方法删除newData中的id
copyStep(index,row){
        // 将对象赋值给一个变量
        let newData = Object.assign({}, row)
        delete newData.id
        将处理完的变量传给下面的两个方法
        this.addStep
				
Object.assign赋值后无法修改问题、深拷贝.... 
这样能解决赋值后无法编辑的问题，
this.form = Object.assign({}, this.form, { name: ‘a’ })
而 这样不能：
Object.assign(this.form, { name: ‘a’ })
this.form = Object.assign({ name: ‘a’ })
				
转载：http://www.cnblogs.com/zhaowenxin/p/6160676.html
对象的扩展
1.ES6中，对象的属性和方法可简写：对象的属性值可不写，前提是属性名已经声明；
 1 var name = "zhangsan";
 2     var password = "1111111";
 3     var obj = {
 4        ...
 var oa = new ObjectAssign ( ) ;
var t = { name : "lisa" , age : 25 } ;
var r = { speak : function ( )  { console . log ( 'Hello, World!' ) } }
var k = oa . assign ( r , t ) ;
// k = { name : "lisa", age : 25,  speak : function ()  { console.log('Hello, World!')} }
<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="form.age"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: 'Tom',
        age: 18
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' }
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 获取表单数据并带上默认值进行提交
          const formData = Object.assign({}, this.form, { gender: 'male' })
          // TODO: 发送请求
</script>
                    CSDN-Ada助手: 
                    非常感谢博主分享这篇关于cesium贴地问题的博客，文章结构清晰，内容详尽。博主的经验分享对我们这些初学者来说非常有帮助。希望博主能够再接再厉，分享更多优秀的技术文章，让我们能够更好地学习和进步。再次感谢博主的用心创作，期待博主的更多精彩文章。
为了方便博主创作，提高生产力，CSDN上线了AI写作助手功能，就在创作编辑器右侧哦～（https://mp.csdn.net/edit?utm_source=blog_comment_recall ）诚邀您来加入测评，到此（https://activity.csdn.net/creatActivity?id=10450&utm_source=blog_comment_recall）发布测评文章即可获得「话题勋章」，同时还有机会拿定制奖牌。
                解决报错Error in nextTick: “RangeError: Maximum call stack size exceeded“
                    百里飞洋: 
                    谢谢，确实是俩组件名字一样了（这个报错太不友好了）
                浏览器记住密码解决办法(密码回写到input框，点击出现密码下拉列表)
                    星野丶Z: 
                    2022年了 好像这些都不行了
                项目调用另一个项目界面
                    zebra137: 
                    两个项目怎么同源
                Element-ui radio单选框
                    达达是一只熊猫: 
                    这个写法解决了查看列表一条记录时对应打钩 赞