对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。根据这样，来做一个vue的三级联动，利用深复制进行添加新的三级联动!如图所示

需求截图.png

直接上vue代码，其中el-select是element ui里面的下拉选择框：

<div style="clear: both;margin-top:15px;" v-for='(i,j) in addone'>
    <el-select v-model="i.field" placeholder="请选择" @change="select(i.field,j)" style="width:25%">
      <el-option
        v-for="item in i.options1"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="i.condition" placeholder="请选择" style="width:25%">
        <el-option
          v-for="item in i.options3"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
    </el-select>
    <el-input v-model="i.data" style="width:36%;display: inline-block" placeholder="请输入内容"></el-input>
    <a size="small" @click="del(j)" style="cursor:pointer;color: #16D032;display:inline-block;margin-left:5%">删除</a>
  </div>
export default {
  data () {
    return {
      addone:[{
          condition: '', 
          field: '',
          data: '',
          options1:[{
              value: 'data0',
              label: 'A',
              options2: [{
                  value: 'Congruent',
                  label: 'A_1'
                  },{
                  value: 'Contain',
                  label: 'A_2'
              }]
          },{
              value: 'data1',
              label: 'B',
              options2: [{
                  value: 'Congruent',
                  label: 'B_1'
                  },{
                  value: 'Contain',
                  label: 'B_2'
              }]
          },{
          value: 'data2',
          label: 'C', 
         options2: [{
            value: 'Congruent',
            label: 'C_1'
          },{
            value: 'Contain',
            label: 'C_2'
          }]
        }]
      }],
      
      value: '',
      value1: '',
      input: '',
    }
  },
  methods: {
    toadd: function () {
      // this.add.push({ 'condition': '', 'field': '', 'data': '' });
      var toadd=this.addone;
      //深复制，可以复制其行为且不改变原有的指向
      var result = JSON.parse(JSON.stringify(toadd[toadd.length-1]));
      this.addone.push(result );
    },
    del: function (n) {
      if(n<1){
          return;
      }
      this.addone.splice(n, 1)
    },
    select(res,tt){
      for (var j = 0; j < this.addone[tt].options1.length; j++) {
          if(res===this.addone[tt].options1[j].value){
              this.addone[tt].options3=this.addone[tt].options1[j].options2
              return;
          }
      }
      
    },
   
    }
  },

}```