expand展开行调用子组件渲染报错[Vue warn]: Error in destroyed hook: “TypeError: Cannot set property...

本文链接：https://blog.csdn.net/qq_39877681/article/details/124998360

本文针对Vue项目中表格展开行时出现的渲染错误问题进行了详细分析，并提供了正确的代码实现方式，帮助开发者避免因数据获取延迟导致的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误示范

报错信息：

在这里插入图片描述

报错原因：点击展开行时，展开行的详情信息获取有延迟，导致渲染报错。

错误代码：

<el-table @expand-change="expandSelect">
 <el-table-column type="expand">
  <template>
   <!--childTablePenetrationTest 为子组件，testDetail为传递给子组件的数据-->
    <childTablePenetrationTest :testDetail="testDetail"></childTablePenetrationTest>
  </template>
 </el-table-column>
</el-table>

import childTablePenetrationTest from "./components/childTablePenetrationTest";
export default {
  components: {
    childTablePenetrationTest,
  },
  data() {
    return {
      testDetail: {},
    }
  }
}
 methods: {
    // 展开行时，获取当前行的数据信息
    expandSelect(row) {
      this.testDetail = row;
    },
 }

正确示范：

正确代码：

<el-table>
 <el-table-column type="expand">
  <template slot-scope="scope">
   <!--childTablePenetrationTest 为子组件，testDetail为传递给子组件的数据-->
    <childTablePenetrationTest :testDetail="scope.row"></childTablePenetrationTest>
  </template>
 </el-table-column>
</el-table>

import childTablePenetrationTest from "./components/childTablePenetrationTest";
export default {
  components: {
    childTablePenetrationTest,
  },
  data() {
    return {}
  }
}
 methods: {}