ElementUI在IE11下兼容性修改

最新推荐文章于 2024-11-04 10:32:11 发布

转载最新推荐文章于 2024-11-04 10:32:11 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tangchun/p/9957890.html

文章标签：

#javascript #ui #ViewUI

本文解决在IE11浏览器中使用Axios和ElementUI遇到的兼容性问题，包括Promise未定义、ES6语法不支持、ElementUI组件如搜索提示框及表格模板使用的问题，并提供具体解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在项目里面使用了axios.js来发送http请求，在IE下报错Promise未定义，解决办法：

　　到http://bluebirdjs.com/docs/getting-started.html 下载 bluebird.min.js脚本加入页面，解决Promise未定义的错误

2、IE11不支持ES6的一些写法：比如=> 等等，解决办法：

　　到 https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=将所有涉及到ES6写法的脚本转成ES5的js

处理了这2个问题，页面终于在IE11显示了，BUT还有2个问题等待解决

1、使用了ElementUi的搜索提示框里面使用了template，结果vue报错，不知如何解决

 <el-col :span="12">
                    <el-form-item label="代码" prop="Code">
                        <el-autocomplete v-model="form.Code"
                                         popper-class="my-autocomplete"
                                         :fetch-suggestions="peopleSearch"
                                         placeholder="请输入内容"
                                         @@select="handlePeopleSelect">
                            <template slot-scope="{ item }">
                                <div class="Code">代码：{{ item.Code }}</div>
                                <div class="Name">姓名：{{ item.Name }}</div>
                                <span class="Year">时间：{{ item.Year }}</span>
                                <hr />
                            </template>
                        </el-autocomplete>
                    </el-form-item>
                </el-col>

最终解决办法：不在使用 template IE上面将不在报错

2、table 列使用template 在IE11下也会有问题放弃使用template 改成formatter

  <el-table-column prop="IsActive"
                         label="启用"
                         width="80"
                         :formatter="formatBool">

3、ElementUI的时间控件选择后不能赋值到界面上去

  <el-date-picker v-model="form.InDate"
                                type="date"
                                placeholder="选择日期">
                </el-date-picker>

　　解决办法：去掉placeholder 属性，使用了placeholder属性将会导致后面的赋值一直赋值不上，一直显示的是第一次赋值的值

转载于:https://www.cnblogs.com/tangchun/p/9957890.html