elementUI 中table表格展开收起实现手风琴效果（只展开一行）

weixin_46156770

于 2021-03-05 13:22:46 发布

阅读量2.3k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_46156770/article/details/114392333

版权

本文详细介绍了如何在ElementUI的Table组件中实现手风琴效果，即点击某行展开详情，同时关闭其他已展开的行，达到只显示一行展开内容的目的。通过对表格数据的操作和监听row-click事件，结合CSS样式控制，成功实现了交互式的表格展开收起功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <el-table ref="table" :data="teamData" style="width: 100%;margin-bottom: 15px;" :row-key="getRowKeys"
      :expand-row-keys="expands" @expand-change="expndChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="teamList" style="width:80%; margin:0 auto" border>
            <el-table-column prop="userName" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="realName" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

最低0.47元/天解锁文章