Element ui 在IE11下的各种不兼容问题

bloger 2021-02-04 PM 70℃ 0条

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

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

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

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

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

例如:

  • 打开页面一篇空白
  • table 搜索问题
  • 函数识别问题等

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

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

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

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

刚好browser.js 可以解决这个问题;

  • 首先百度搜索一下browser.js并下载
  • 引入到项目中
<script type="text/javascript" src="/static/js/browser.min.js"></script>
  • 将js段加上type="text/babel"
<script type="text/javascript" src="/static/js/browser.min.js"></script>

<script type="text/babel">
    var vm = new Vue({
        el: '#app',
        data:{

        },
        methods: {
            
         
        },
        mounted: function () {
            
        },
    })
</script>

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

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

Dingtalk_20210204162010.jpg
比如:在表格使用 搜索

table.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))

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

因此并有复现出来;

大概思考了一下:

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

使部分问题得到了解决;

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


<script type="text/babel">

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

<el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="Date"
      prop="date">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>

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

毕竟Es6语法是兼容es5语法的,因此我们替换以上的语法为:

table.filter(function(data){return !search || data.'.$value.'.toLowerCase().indexOf(search.toLowerCase()) > -1

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

标签: Es6, Javascript

非特殊说明,本博所有文章均为博主原创。

评论啦~