vue el-table实现递归嵌套的示例代码
说明: el-table有一个表格一级数据和二级数据显示的是一样的,像这种就可以用递归实现。
数据结构是这样子的:
tableData:[{ name: "Lucy", age: 18, mobile: "11111111111", type: 1, friends:[{ name: "Lucy-friend1", age: 16, mobile: "11111111111" },{ name: "Lucy-friend2", age: 16, mobile: "11111111111" }] }]
像以上这种数据结构想要如下图一样显示:
我用的是el-table组件,所以单独建了一个组件用于表格递归显示。regionTableTemplate里expend中用到的递归显示二级数据
代码如下:
<template> <el-table :data="tableData" class="table-sub" ref="regionTable" :show-header="showHeader" :row-class-name="isShowExpend"> <el-table-column type="expand"> <template slot-scope="scope"> <template v-if="scope.row.friends"> <regionTableTemplate class="in-table" :tableData="scope.row.friends" :showHeader="false"></regionTableTemplate> </template> </template> </el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="mobile" label="手机号"></el-table-column> <el-table-column label="操作" width="220"> <template slot-scope="scope"> <el-button type="text">详情</el-button> <el-button type="text"> 创建可用区</el-button> <el-button :disabled="scope.row.type === 1?true:false" type="text">删除</el-button> </template> </el-table-column> </el-table> </template> <script> export default { name: "regionTableTemplate", props:{ tableData: Array, showHeader: Boolean }, methods:{ //展开行 用于没有friends数组即没有子数据 isShowExpend(row, index) { if (row.row.friends&&row.row.friends) { return '' } else { return 'hide-expand' } } } } </script> <style> </style>
父组件调用
<template> <div id="ops-region-wrapper"> <div class="ops-list-wrapper"> <table-vue :tableData="tableData" :showHeader="true" @showRegionFlag="showRegionFlag" @showDelDialog="showDelDialog"></table-vue> <Pager :pages='pages' @changeCurrent='changeCurrent'></Pager> </div> </div> </template> <script> import Pager from '@/components/Pager.vue'; import tableVue from './components/table.vue'; export default { components:{ Pager, tableVue }, data() { return { tableData: [{ name: "Lucy", age: 18, mobile: "11111111111", type: 1, friends:[{ name: "Lucy-friend1", age: 16, mobile: "11111111111" },{ name: "Lucy-friend2", age: 16, mobile: "11111111111" }] }], pages: {//分页 showItem: 15, total: 0, currentPage: 1 }, } }, methods: { //分页 changeCurrent(val) { this.pages.currentPage = val; } }, mounted() { this.getList(); } } </script> <style lang="scss"> #ops-region-wrapper{ .el-table { margin-top: 15px; tr .el-table__expanded-cell { padding: 0; border-bottom: none; } .el-table__expand-icon { width: 18px; height: 18px; line-height: 16px; background: rgba(54, 134, 255, 0.2); color: #3686ff; border: 1px solid #3686FF; box-sizing: border-box; border-radius: 50%; transform: scale(0.8); i { font-weight: bold; font-size: 12px; left: 48%; } } .el-table__expand-icon--expanded{ transform: rotate(90deg) scale(0.8); } .hide-expand .el-table__expand-column>.cell { display: none; } } .in-table{ &::before{ border: none; } margin: 0; padding: 0; .el-table__expand-column>.cell,.el-table__expanded-cell { display: none; } } .el-button--text { margin: 0 20px 0 0; @include pageFont(12px, #006EFF, 400, "PingFangSC-Regular, PingFang SC", 17px); &.is-disabled{ color: #979797; } } .is-click { cursor: pointer; text-decoration: underline; text-decoration-color: #3686FF; @include pageFont(12px, #3686FF, 400, "PingFangSC-Regular, PingFang SC", 17px); } } </style>
到此这篇关于vue el-table实现递归嵌套的示例代码的文章就介绍到这了,更多相关vue el-table递归嵌套内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/Missxu1895/article/details/125892192
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16