关于element-ui select组件change事件只要数据变化就会触发的解决办法

对象赋值问题(对象赋值影响原对象)

问题示例
直接用=的方式把一个对象赋值给另一个对象，会导致修改新对象时，原对象也发生变化

var obj1 = {'age': '10','friends':{'Aymi':'12','Jack':'9'}};
var obj2 = obj1; // obj1赋值给新对象obj2
obj2.age = '20'; // 修改obj2的age值
console.log(obj1.age); // '20' // obj1中的age值也改变了

问题原因：
JavaScript 中对象的赋值是默认引用赋值的（两个对象指向相同的内存地址），所以修改另一个对象时，即修改了内存地址里的对象，其他关联对象也会改变。

解决方法：

• 转换类型法：obj2=JSON.parse(JSON.stringify(obj1))
• es6之Object.assign()法：obj2=Object.assign({},obj1)

注：Object.assign()方法有不足之处，Object.assign()只是让对象里第一层的数据没有了关联性(即修改obj2.age时obj1.age不会发生变化)，但是对象内的对象则跟被复制的对象有着关联性的(即当修改更深层的obj2.friends.Aymi的值时，原对象obj1.friends.Aymi也跟着发生了变化)

所以推荐使用obj2=JSON.parse(JSON.stringify(obj1))这种方法

visible-change使用

使用select组件和表格组件结合起来用，但是发现在点击下一页的时候，由于select当中的数据发生了变化，所以也会触发select当中的change事件，但是我只希望在我主动改变select组件当中的数据的时候才触发change事件要怎么办呢？

去看element-ui的官方文档后发现select组件当中还有个visible-change事件，在visible-change事件当中添加个数据起到开关的作用，只有在点击下拉的时候‘开关’才打开。 才能执行change事件。当点击下一页的时候将开关关闭。

visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false