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

Question

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>

Answer 1

【相关推荐】

• 这篇博客: 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)

  

   

   

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