成品就如上图所示,下面具体介绍一下实现过程:

(1)首先查阅Element ui 文档,找到Tabel组件展开行这一部分，通过设置 type="expand" 和 Scoped slot 可以开启展开行功能.

(2)设置slot-scope,slot-scope包含的部分就是展开行的内容

(3)设置slot-scope="props(参数，可替换)"，即可通过props.row获取到当前数据,如果当前数据里某个数组list作为展开行的数据源，那么只需要props.row.list(数组字段)就可获取到，如下图。

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

Hunyuan OCR & Z-Image-Turbo 正式上线！两大模型在 NPU 加速平台完成部署，开启 AI 识图新时代！

avatar AtomGit开源社区
cover

COSCon‘2025 第十届中国开源年会，AtomGit 邀您共赴开源 + AI 的十年之约！

avatar AtomGit开源社区

从文献检索到论文成稿：7款AI工具助力你的学术研究全流程

没有哪一款工具是万能的，最佳实践是根据自己的具体需求，将它们组合成一套适合自己的个性化工作流。它将文献的“检索、管理、阅读、问答、写作”等功能整合在同一个工作空间内，致力于减少研究者在不同软件间的切换成本。输入一篇关键论文，Connected Papers能快速生成一张与该论文在学术上高度相关的文献网络图谱，直观地展示该领域的研究格局。其AI问答功能在回答时会附上来源文献及页码，保证了学术信息的严

avatar AtomGit开源社区