elementui el-table折叠表格，点击主表数据展开从表明细

在Element UI中，可以使用el-table组件创建折叠格子，当点击主表数据时展开从表细节。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%;" row-key="id">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.details" style="width: 100%;">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column label="主表列1" prop="date"></el-table-column>
    <el-table-column label="主表列2" prop="name"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          details: [
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
            // ...更多从表数据
          ],
        },
        // ...更多主表数据
      ],
    };
  },
};
</script>

在这个例子中，el-table组件被嵌套使用。外层的el-table是主表格，内层的el-table是折叠后展示的从表细节。主表数据通过data属性绑定，而从表数据作为主表数据中的一个字段存在。点击主表数据的行，相应的从表数据会展开。