Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which

Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

自己封装的表格在使用时由于数据要区分开 [异常订单、异常用户、异常设备] 三种，所以列el-table-column就使用动态component了，不点击的话是可以渲染的，一点击就不行了

    <CustomTable
      :loading="loading"
      :total="total"
      :data="tableData"
      height="560"
      :row-key="pageType | rowKey"
      :page-size="queryForm.pageSize"
      :current-page="queryForm.pageNum"
      @current-change="handleCurrentChange"
      @size-change="dataSizeChange"
    >
      <template v-slot:left>
        <el-radio-group
          size="small"
          :disabled="loading"
          v-model="pageType"
          @input="changePage"
        >
          <el-radio-button label="1">异常订单</el-radio-button>
          <el-radio-button label="2">异常用户</el-radio-button>
          <el-radio-button label="3">异常设备</el-radio-button>
        </el-radio-group>
      </template>

      <template v-slot:columns>
           <component :is="'abnormalTable-' + pageType" /> 这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里这里
      </template>

    </CustomTable>

img

img

img

【相关推荐】



  • 这篇博客: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which中的 背景： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    在子组件和和父组件来回调用其内部函数时，并通过v-if频繁控制显示/销毁，出现了如下报错信息：

    vue.runtime.esm.js:619 [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."
    warn @ vue.runtime.esm.js:619
    logError @ vue.runtime.esm.js:1884
    globalHandleError @ vue.runtime.esm.js:1879
    handleError @ vue.runtime.esm.js:1839
    (anonymous) @ vue.runtime.esm.js:1982
    flushCallbacks @ vue.runtime.esm.js:1906
    Promise.then (async)
    timerFunc @ vue.runtime.esm.js:1933
    nextTick @ vue.runtime.esm.js:1990
    queueWatcher @ vue.runtime.esm.js:4396
    update @ vue.runtime.esm.js:4538
    notify @ vue.runtime.esm.js:730
    reactiveSetter @ vue.runtime.esm.js:1055
    proxySetter @ vue.runtime.esm.js:4625
    Message @ element-ui.common.js:30550
    (anonymous) @ DiagnoseRefuseDetail.vue?92a0:274
    Promise.then (async)
    refuseSP @ DiagnoseRefuseDetail.vue?92a0:273
    saveDiagnose @ DiagnoseRefuseDetail.vue?92a0:288
    saveRefuseDiagnose @ index.vue?5ac9:344
    invokeWithErrorHandling @ vue.runtime.esm.js:1854
    invoker @ vue.runtime.esm.js:2179
    invokeWithErrorHandling @ vue.runtime.esm.js:1854
    Vue.$emit @ vue.runtime.esm.js:3882
    handleClick @ element-ui.common.js:9412
    invokeWithErrorHandling @ vue.runtime.esm.js:1854
    invoker @ vue.runtime.esm.js:2179
    original._wrapper @ vue.runtime.esm.js:6911
    vue.runtime.esm.js:1888 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
        at Object.insertBefore (http://10.10.19.117:9528/app.js:179938:14)
        at updateChildren (http://10.10.19.117:9528/app.js:180451:32)
        at patchVnode (http://10.10.19.117:9528/app.js:180548:29)
        at VueComponent.patch [as __patch__] (http://10.10.19.117:9528/app.js:180711:9)
        at VueComponent.Vue._update (http://10.10.19.117:9528/app.js:178181:19)
        at VueComponent.updateComponent (http://10.10.19.117:9528/app.js:178299:10)
        at Watcher.get (http://10.10.19.117:9528/app.js:178712:25)
        at Watcher.run (http://10.10.19.117:9528/app.js:178787:22)
        at flushSchedulerQueue (http://10.10.19.117:9528/app.js:178543:13)
        at Array.<anonymous> (http://10.10.19.117:9528/app.js:176224:12)

     

     


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

在外面套一个div试试

img