Element-ui table组件实现手风琴效果

最新推荐文章于 2024-11-21 14:12:58 发布

小星落

最新推荐文章于 2024-11-21 14:12:58 发布

阅读量2.3k

点赞数

分类专栏： javascript HTML

本文链接：https://blog.csdn.net/qq_46380656/article/details/113540260

版权

javascript 同时被 2 个专栏收录

52 篇文章

订阅专栏

HTML

13 篇文章

订阅专栏

利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开
官网table expand地址：http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing

<el-table :data="tableData" style="width: 100%" ref="table">
    <el-table-column label="编号" align="center">
      <template slot-scope="{row}">{{ row.id }}</template>
    </el-table-column>
     <el-table-column prop="money" label="金额"></el-table-column>
     <el-table-column prop="addTime" label="时间"></el-table-column>
     <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
    <el-table-column type="expand" width=1>
      <template slot-scope="props">
          <el-table :data="props.row.list">
            <el-table-column prop="money" label="金额"></el-table-column>
            <el-table-column prop="addTime" label="时间"></el-table-column>
          </el-table>
      </template>
    </el-table-column>
   </el-table>

toogleExpand(row) {
   let $table = this.$refs.table;
  this.tableData5.map((item) => {
     if (row.id != item.id) {
       $table.toggleRowExpansion(item, false)
    }
   })
   $table.toggleRowExpansion(row)
 }