在el-table中套一个表格，点击每一行根据后端返回的数据看是否存在child数据，存在即在当前行下展示一个列表

你可以在 el-table 中使用 slot-scope 属性来自定义每一行的内容，然后利用 v-if 判断当前行是否存在 child 数据，如果存在就在当前行下展示一个列表。具体实现步骤如下：

1. 在 el-table 中设置 slot-scope 属性，用于自定义每一行的内容。例如：

<el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <div v-if="scope.row.hasChild">
        <el-button type="text" @click="toggleChild(scope.row)">查看详情</el-button>
        <el-table :data="scope.row.childData" style="width: 100%;margin-top: 10px;">
          <el-table-column prop="childName" label="姓名"></el-table-column>
          <el-table-column prop="childAge" label="年龄"></el-table-column>
          <el-table-column prop="childGender" label="性别"></el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-button type="text">暂无详情</el-button>
      </div>
    </template>
  </el-table-column>
</el-table>

2. 在 row-click 事件中判断当前行是否存在 child 数据，如果存在则请求后端接口获取 child 数据，否则不做任何处理。例如：

methods: {
  handleRowClick(row) {
    if (row.hasChild) {
      axios.get('/api/getChildData', { params: { id: row.id } }).then(res => {
        row.childData = res.data;
        row.showChild = true;
      });
    }
  },
  toggleChild(row) {
    row.showChild = !row.showChild;
  }
}

3. 在数据中添加 hasChild、childData、showChild 等字段用于判断当前行是否存在 child 数据以及控制列表的展开和收起。例如：

data() {
  return {
    tableData: [
      { id: 1, name: '张三', age: 18, hasChild: true, childData: [], showChild: false },
      { id: 2, name: '李四', age: 20, hasChild: false, childData: [], showChild: false },
      { id: 3, name: '王五', age: 22, hasChild: true, childData: [], showChild: false },
      { id: 4, name: '赵六', age: 24, hasChild: false, childData: [], showChild: false },
    ]
  }
}

这样就可以在 el-table 中嵌套一个表格，点击每一行根据后端返回的数据看是否存在 child 数据，存在即在当前行下展示一个列表了。