The table component does not render under IE11, given : "Error in render: "TypeError: Object doesn't support property or method 'entries'""

Question

我是网络应用程序开发的新手，正在使用 Vue cli、antd 组件开发一个项目，它在 IE11 上运行。

IE11 似乎没有渲染组件，它注释掉了 table。

IE11 element

控制台报错：

[Vue warn]: Error in render: "TypeError: Object doesn't support property 
or method 'entries'"

我查了ant-design-vue的ticket，好像没有人有同样的问题，所以我假设是polyfill或者ES5转ES6的设置问题

下面是我的html页面

    <template>
      <div id="detailDash">
        <h1>{{id}}</h1>
        <a-table 
          :columns="columns" 
          :dataSource="data" 
          style="padding: 50px;" 
          :bordered="true">
        </a-table>
      </div>
    </template>

vuejs代码

    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
    const columns = [...];
    const innerColumns = [...];
    export default  {
      data(){
        return {
          id: '',
          status:'',
          data:[....],
          columns,
          innerColumns,
        }
      },
      created() {
          this.id = this.$route.params.envID;
      },
      methods:{
        checkStatus(){
          this.state = 'success'
          return status;
        }
      }
    }
    </script>

babel.config.js

// babel.config.js
    module.exports = {
      presets: [
        ['@vue/app', 
        {
          polyfills: [
            'es6.promise',
            'es6.symbol'
          ]
        }
      ]
      ]
    }

我 google 一整天都在为这个 typeError 发愁，但没有人给出一个干净的解决方案，我真的需要一些帮助！！

Answer 1

您需要向旧版浏览器添加 polyfill，以便让它们执行适用于现代浏览器的代码。 Object.entries 是 IE 上不存在的函数示例。

正如我在对 you can polyfill statically (in your case by editing babel.config.js), or dynamically (by using a service like polyfill.io 的回答中所解释的那样。使用动态 polyfill 的优点是 API 仅提供浏览器实际需要的内容，从而减少了包的大小。

因为您使用的是 Vue CLI，您需要像这样向 public/index.html 添加脚本标签：

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Object.entries%2CSymbol.iterator"></script>

我根据您上面的评论添加了 Object.entries 和 Symbol.iterator。您可能需要更多。使用 builder 添加附加功能。

最后，您需要不断测试您的应用程序，以了解在给定浏览器中成功运行需要哪些功能。您可能需要多次重复此过程，直到所有错误都消失。确保在多个页面上进行测试，因为并非所有页面包都具有相同的要求。

The table component does not render under IE11, given : "Error in render: "TypeError: Object doesn't support property or method 'entries'""

The table component does not render under IE11, given : "Error in render: "TypeError: Object doesn't support property or method 'entries'""

javascript

internet-explorer-11

vue.js

antd