利用javascript里面浅复制与深复制的原理，用vue做三级联动，并且复制联动行为

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

需求截图.png

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

    
      
      
    
    
        
        
    
    
    删除
  
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;
          }
      }
      
    },
   
    }
  },

}```