VUE ElementUI table 展开行 子表格无法加载数据

<template>
  <el-table
        :data="tableData"
        :row-key="getRowKeys"
        :expand-row-keys="expands"

        style="width: 100%"
      >
     
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>

      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      
      <el-table-column
        prop="sex"
        label="性别">
      </el-table-column>

      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>

      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template>
          <el-button type="text">编辑</el-button>
          <span>|</span>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>

      <el-table-column type="expand" width="30">
        <template scope="scope">
          <el-table :data="scope.row.innerList" style="width: 100%">

            <el-table-column prop="innerList.school" label="毕业院校">
            </el-table-column>

            <el-table-column prop="innerList.company" label="公司名称">
            </el-table-column>
            
          </el-table>
        </template>
      </el-table-column>
 
</el-table>
</template>

<style>
    .el-table__expand-icon--expanded{ 
      transform: rotate(180deg);
  }
    .el-icon-arrow-right:before { 
      content: "\e6df";
    }
</style>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id:1,
          date: '2016-05-02',
          name: '王小虎',
          sex: '男',
          age : 21,
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id:2,
          date: '2016-05-04',
          name: '王小虎',
          sex: '男',
          age : 21,
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id:3,
          date: '2016-05-01',
          name: '王小虎',
          sex: '男',
          age : 21,
          address: '上海市普陀区金沙江路 1519 弄',
        }, {
          id:4,
          date: '2016-05-03',
          name: '王小虎',
          sex: '男',
          age : 21,
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        innerList : [{
          school : '大连枫叶职业技术学院',
          company : '大连新致软件公司',
        },{
          school : '大连枫叶职业技术学院',
          company : '大连新致软件公司',
        },{
          school : '大连枫叶职业技术学院',
          company : '大连新致软件公司',
        },{
          school : '大连枫叶职业技术学院',
          company : '大连新致软件公司',
        }],
        expands:[],
      }
    },
    methods : {
      clickRowHandle(row, column, event) {
        if (this.expands.includes(row.id)) {
          this.expands = this.expands.filter(val => val !== row.id);
        } else {
          this.expands.push(row.id);
        }
      },
      getRowKeys(row) {
        return row.id;
      },
      handleExpendRow(row, expandedRows) { //这里是点击每一行会触发的方法
      // if (!row.dicts) { //这里做了一个判断，首先判断这一行的数据对象有没有dicts这个属性，如果没说明没有数据我们需要请求后台，相当于懒加载
        this.queryDictData(row.id, row.labelType) //关键就是这个方法，row.id是父分组的id需要传给后台查询该子分组的信息
      // }
      },
      queryDictData(id, labelType) {
            let self = this
            let rspData = {
          id:3,
          date: '2016-05-03',
          name: '王小虎',
          sex: '男',
          age : 21,
          address: '上海市普陀区金沙江路 1516 弄',
          school : '大连枫叶职业技术学院',
          company : '大连新致软件公司',
        }; //这里是我们项目里封装的ajax请求方法，相当于axios.post()
              const index = self.tableData.findIndex(data => data.id === id) //首先pageData.results绑定的是父表格的数据，那么我们要把子表格数据塞到对应的父分组，那我们要知道是哪一个分组，这里的findIndex就是通过id去查找对应的父分组在数据数组里的下标
              if (self.tableData && rspData.length) {
                rspData.forEach(item => { //这里我是给每个子分组信息里都加上父分组的id，以方便后面操作子表格每一行后，回调函数里刷新数据时需要用到，要知道他的父亲是谁，哈哈
                  item.labelId = id
                })
              }
              self.$set(self.inneList[index], 'dicts', rspData) //这里就是给父表格数据数组self.pageData.results第index个对象加上dicts这个属性，然后把rspData.data我们从后台拿到的数据绑定到dicts这个key里
       }
      }
  }
</script>

加个属性试试：:tree-props="{children: 'children', hasChildren: 'hasChildren'}"

可能有两个地方原因，可以都加一下

①给el-table加上row-key这个属性，当包含children时，被视为树形数据，渲染时必须要指定 row-key，row-key="id"

②其实每一个el-table-column行，要想展开有数据，需要给每个行数据也就是tableData中的每个数据加一个children属性，然后table加上属性:tree-props="{children: 'children', hasChildren: 'hasChildren'}"，这样，才能展开显示子数据

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y