如何用Vue和ElementUI实现页面内嵌表格的示例代码？

本文共计1539个文字，预计阅读时间需要7分钟。

在大四实习工作中，遇到一个独特的需求：需在一个表格中点击某条数据的编号，在数据下方出现一个新的表格。此需求在Element UI官方文档中也有示例。

在大四实习工作中碰到一个比较特别的需求，要求在一个 table 表格中点击一条数据的编号，在该条数据下方出现一个新的 table 表格。这个需求在 element UI 的官方文档中也有案例，以下是参考了其他博客（找不到博客地址了）和 element UI 之后的最终实现效果。

效果图

不知道是公司电脑比较拉，还是软件问题导致录制出来的动态图很卡，但是在实际操作并不会卡。

代码：

页面显示代码：

主要代码在于 <el-table-column type="expand" width="1" >
type="expand" 官方解释：
通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。