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

错误示范

报错信息：

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

错误代码：

<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: {}

注：vue slot-scope="scope"的理解

请参考此篇讲解：https://blog.csdn.net/qyl_0316/article/details/107360542