vue的在IE中兼容问题和项目踩坑2020.10.23

       最近在开发公司的质量无纸化项目遇到一些前端开发的坑，小结一些加深影响

 

1. 问题1，首页的单据统计 在Chrome中开发完成后界面显示正常

　　  项目中用到了vue, echarts，用按钮触发改变echarst的图形，当然，通过vue的数据驱动来绑定echarts, 效果基本能完成

         

     当我试从IE, 360浏览器打开，，悲剧就发生了呢。。。

    

 

 

 

 

       更悲剧的是马上要给客户展示，于是开始了一顿操作猛如虎的调试

       判断如下：

       1.vue在IE下的兼容问题, IE11下不兼用ES6的语法 

        ie11  不支持 ES6语法 forEach,   也不支持forEach方法

array.forEach(()=>{  
    //do something
});

　　为了兼容IE,   修改使用 map循环

arry.map(function(item, index){

      //do something

});

　　

       2. 问题2， 单据查询计 在Chrome中开发完成后界面显示正常

 

 

 

        

 

 

 

 

 

  首次显示正常， 经过弹窗显示子页面后， 主页面的的echarts趋势图消失，而且在切换参数也没法正常显示

   判断 

  

主页面vue对象数据被更改
由于父子页面传参只是浅拷贝，子页面数据更新导致父页面数据的变化

　　

解决办法是在子页面中使用对象的深拷贝，不影响父页面的数据

如：

 var obj = JSON.parse(JSON.stringify(parent.layui.currData));

　　

总结：

 1.在普通项目中使用vue,如果要兼容IE浏览器， 主页规避一些ES6的语法，采取兼用写法

 2. 使用vue做一些复杂页面， 注意已数据驱动的思路来做页面的交互

 

 

本项目是精益制造的项目， 主要打造制造质量的无纸化管理， 工厂实现质量信息化和数字化转型（QMS）