您现在的位置是：网站首页> 编程资料编程资料

vue el-table实现递归嵌套的示例代码_vue.js_

2023-05-24 365人已围观

简介 vue el-table实现递归嵌套的示例代码_vue.js_

说明： 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中用到的递归显示二级数据
代码如下：

父组件调用

到此这篇关于vue el-table实现递归嵌套的示例代码的文章就介绍到这了,更多相关vue el-table递归嵌套内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：vue实现input输入模糊查询的三种方式_vue.js_

下一篇：JavaScript实现音乐播放器_javascript技巧_

您现在的位置是：网站首页> 编程资料编程资料

vue el-table实现递归嵌套的示例代码_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢