锐客网

  1. 首页 > it技术 > >

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

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

利用javascript里面浅复制与深复制的原理，用vue做三级联动，并且复制联动行为
文章图片
需求截图.png 【利用javascript里面浅复制与深复制的原理，用vue做三级联动，并且复制联动行为】直接上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; } }},} },}```

    推荐阅读


    上一篇：来人间走一遭，总得带点伤，才对得起年少轻狂。

    下一篇：嗨，原来你也在这