Unknown custom element: <StatisticTable>

Question

自己封装的table组件,注册并引用了,

chrome浏览器显示正常

但是IE9报错

[Vue warn]: Unknown custom element: <StatisticTable> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

---

引用处：

<template>
  <div>
    <StatisticReport :productType="productType" :listType="listType" @handleTableList="handleTableList" :tableLoading="tableLoading"/>
   <div class="p-hr"></div>
   <div ref="tableWrap">
     <StatisticTable :columns="importCaseColumns" :data="importCaseList" :loading="tableLoading" :totalCount="importCaseTotalCount"></StatisticTable>
   </div>
 </div>
</template>

<script>
import columnFn from '../../common/statisticColumns'
import moment from 'moment'
import { isSuccessList } from '@/utils/data'
import StatisticReport from '../../common/statisticReportForm'
import StatisticTable from '../../common/statisticTable/statisticTable'
export default {
  name: 'ImportCase',
  components: { StatisticTable, StatisticReport },
  props: {
    listType: String
  },
  data () {
    return {
      isSuccessList,
      productType: 3,
      tableLoading: false,
      importCaseTotalCount: [],
      ...columnFn.call(this, moment),
      importCaseList: []
    }
  },
  methods: {
    handleTableList (tableLoading, showTotal, tableList, sumAmount) {
      this.tableLoading = tableLoading
      this.importCaseList = tableList
      this.importCaseTotalCount = showTotal ? ['合计', '', '', '', sumAmount] : []
    }
  }
}
</script>

<style scoped>

</style>

---

封装处：

<template>
  <div>
    <div class="table-container">
      <table>
        <thead class="table-header">
        <tr>
          <th v-for="(row, rowIndex) in columns" :key="rowIndex" :style="{'width':headStyle}">{{row.title}}</th>
        </tr>
        </thead>
        <tbody v-if="hasData" class="table-body" :style="{'height': resultTableHeight}">
        <tr v-for="(row, rowIndex) in data" :key="rowIndex">
          <template v-for="(item, itemIndex) in columns">
            <td v-if="item.key" :key="itemIndex">{{row[item.key]}}</td>
            <td v-else :key="itemIndex">
              <TableExpand :row="row" :index="rowIndex" :render="item.render"></TableExpand>
            </td>
          </template>
        </tr>
        </tbody>
        <tbody v-else style="display: block; text-align: center; font-size: 12px; font-weight: normal; margin-top: 20px; margin-bottom: 20px;">暂无数据</tbody>
        <tfoot class="table-foot">
        <tr>
          <td v-for="(row, rowIndex) in totalCount" :key="rowIndex" :style="{'width':headStyle}">{{row}}</td>
        </tr>
        </tfoot>
      </table>
      <div style="position: absolute; width: calc(100%); height: 200px; top: 168px;" v-if="loading">
        <Spin fix size="large">
          <slot name="loading"></slot>
        </Spin>
      </div>
    </div>
  </div>
</template>
export default {
  name: 'StatisticTable',
  components: { TableExpand },
  props: {
    data: Array,
    columns: Array,
    totalCount: Array,
    loading: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    totalCount (newV, oldV) {
      if (newV.length) {
        this.showTotalCount = true
      } else {
        this.showTotalCount = false
      }
    },
    data (newV, oldV) {
      if (newV.length) {
        this.hasData = true
      } else {
        this.hasData = false
      }
    }
  },
  computed: {
    headStyle () {
      return Number(1 / this.columns.length * 100).toFixed(2) + '%'
    },
    resultTableHeight () {
      return Math.min(this.data.length * 48, 48 * 8) + 'px'
    }
  },
  data () {
    return {
      showTotalCount: false,
      hasData: false
    }
  }