php+不支持ie11,Element ui 在IE11下的各种不兼容问题

前不久刚发布了Yaf-element，平时开发多数使用谷歌内核的浏览器；

而刚好element在谷歌内核浏览器运行完美；

今天在使用Yaf-element做完一个项目交给客户之后；

他平时不怎么用电脑，浏览器也没升级；

因此使用万恶的IE浏览器下发现了很多问题；

例如：打开页面一篇空白

table 搜索问题

函数识别问题等

今天刚好有空来解决一波：

问题主要是 ElementUI + vue 中使用了一些ES6的语法，

而IE对ES6的支持程度很低，

因此我们要兼容IE就必须把ES6语法替换成ES5;

刚好browser.js 可以解决这个问题；首先百度搜索一下browser.js并下载

引入到项目中将js段加上type="text/babel"

var vm = new Vue({

el: '#app',

data:{

},

methods: {

},

mounted: function () {

},

})

就这样即可解决Element ui 在IE11下的问题；

这里暂时解决了大部分问题，还有一些隐藏极深的问题；

比如：在表格使用 搜索table.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))

在IE11下会出现Error compiling template，我查了很多资料都没有解决方法，很多朋友可能也没有再IE浏览器的下的兼容性；

因此并有复现出来；

大概思考了一下：

我们使用browser.js并且在javascript 上加上 type="text/babel来兼容ES6语法

使部分问题得到了解决；

然而以下搜索语法是在页面上加载的，而不是在

该代码块中；因此以下代码并不在browser.js 的范围内，因此在IE中依然不兼容；

:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"

style="width: 100%">

label="Date"

prop="date">

label="Name"

prop="name">

align="right">

v-model="search"

size="mini"

placeholder="输入关键字搜索"/>

size="mini"

@click="handleEdit(scope.$index, scope.row)">Edit

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">Delete

我想了一下，既然兼容不了，我们只能将以上这一段代码写成Es5语法了，

毕竟Es6语法是兼容es5语法的，因此我们替换以上的语法为：table.filter(function(data){return !search || data.'.$value.'.toLowerCase().indexOf(search.toLowerCase()) > -1

总结：箭头函数以及includes函数都是ES6中的语法，我们将箭头函数以及includes函数替换即可兼容IE9以上的浏览器；