vue实现树形表格,父表格和子表格显示内容不同,动态加载数据教程(简单易懂)
vue实现树形表格,父表格和子表格显示内容不同,动态加载数据教程
·
参考样式:父表格可展开显示子表格
先安装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即可;
只要将请求都得到的数组赋给你定义的数组就好啦,有问题可留言!
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐



所有评论(0)