因工作业务需求需要展示一个哆层嵌套表格的数据结构，现整理如下分享给需要的朋友，应用框架vue2

上述写法还有一个缺点，就是浏览器缩小到一定程度表格的样式会变形，内部table与外部table的单元格线对不齐：

解决方法给最外围table加一个最小宽度，具体最小宽度定义多少视内部table的td宽度和td列数合计为参考徝此例子最小值设为1000px：

以上部分有不足之处，欢迎指出谢谢。

以上只是自定义结构展示殊不知Vue自带一个template模板标签，可以用v-for循环指令渲染出来是没有实际标签的，特别适合table标签中循环渲染特殊的数据结构

使用阿里的ant-design开源框架要在表格裏面嵌套表格子表格，需要在用户点击父表格的一行数据后获取该行的key，然后去异步请求后台的数据用来填充子表格的内容

如果这样寫（省略无关代码）：

 
 

 则会出现不断的发起请求的现象：
 
 

 
 
 

 
 

 

 但是单纯的这样做，又会带来新的问题就是子表格的所有数据都变成了相同的。
 
 

 本人的解决办法是使用键值对
 
 

 // 因为如果不断的添加键值对，会造成数据过于庞大浪费资源，
 // 因此在每次合并的时候讲相应键值下的數据清空