关于TypeError: Cannot read property ‘_vueTypes_name‘ of null的错误处理

问题描述

引用antd vue中的a-table组件报错：TypeError: Cannot read property ‘_vueTypes_name‘ of null
在开发项目时遇到TypeError: Cannot read property ‘_vueTypes_name‘ of null错误，在网上找了很久解决方案，一直没有找到详细的解决办法，浪费了很多时间。

原因分析：

<a-table
      ref="table"
      size="middle"
      bordered
      :rowKey="
        (record, index) => {
          return index
        }
      "
      :scroll="{ x: 800, y: 'calc(100vh - 460px)' }"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :loading="loading"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      class="j-table-force-nowrap"
      style="margin: 20px 0"
      @change="handleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="withdrawDelay(record)" >撤回</a>
        <a-divider type="vertical" />
        <a @click="seeDelayDetail(record)">查看</a>
      </span>
    </a-table>

我的报错原因是因为在项目中，封装组件时引用了antd vue 的table组件，由于该组件的数据源是从父组件继承过来，所以没有使用混入loadData()方法,组件中的rowSelection属性没有注释，产生了该错误

解决方案：

    <a-table
      ref="table"
      size="middle"
      bordered
      :rowKey="
        (record, index) => {
          return index
        }
      "
      :scroll="{ x: 800, y: 'calc(100vh - 460px)' }"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      class="j-table-force-nowrap"
      style="margin: 20px 0"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="withdrawDelay(record.id)">撤回</a>
        <a-divider type="vertical" />
        <a @click="seeDelayDetail(record)">查看</a>
      </span>
    </a-table>

将rowSelection属性注释后，错误成功解决。
前端小菜一个，纯属记录下bug，如有不成熟的地方，大佬们见谅