参考样式:父表格可展开显示子表格

 先安装elementplus,如果没有可参考  安装 | Element Plus (gitee.io)  

安装好后复制以下代码

<el-table :data="postList" @selection-change="handleSelectionChange" >

      <el-table-column align="center" type="expand">
        <template #default="scopes">
          //scopes.row.list的list是后端返给前端大数组中的子数组名称,list改为你的子数组名称即可
          <el-table:data="scopes.row.list">
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="创建时间" prop="create_time"></el-table-column>
        </el-table>
        </template>

      </el-table-column>
      <el-table-column label="真实姓名" align="center" prop="realname" />
      <el-table-column label="创建时间" align="center" prop="create_time" />
    </el-table>

在<script></script>中定义数组

//script中定义
 
 postList: [],
 
//发起请求后得到的数据数据中包含子数组,将得到的大数组赋给postList即可;

只要将请求都得到的数组赋给你定义的数组就好啦,有问题可留言!

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐