el-table中的点击展开与折叠/手风琴

效果如图:
在这里插入图片描述

1、为按钮设置点击事件传参

<el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
       </template>
  </el-table-column>

2、需要打开的内容

<el-table-column type="expand" width="1">
          <template slot-scope="props">
	            <div label-position="right" inline class="demo-table-expand">
	              <div class="input-res">
	                  <span>result</span><br>{{ props.row.result }}
	               </div>
	               <el-button type="primary"  @click="download">DOWNLOAD</el-button>
	            </div>
          </template>
  </el-table-column>
          

3、点击方法

toogleExpand(row) {
      const $table = this.$refs.table;
      this.tableData.map((item) => {
        console.log('1',item)
        if (row.performId != item.performId) {
          $table.toggleRowExpansion(item, false)
        }
      })
      $table.toggleRowExpansion(row)
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值