element 表格只展开一行(点击下一行上一行关闭)

源码:第一步

<el-table :data="tableData" border :row-class-name="tableRowClassName" @expand-change="expandChange" :expand-row-keys="expands" :row-key='getRowKeys'>
				<el-table-column type="expand" label="详情">
					<template slot-scope="props">
						<el-form label-position="left" class="demo-table-expand" label-width="120px">
							<el-form-item label="印章图标" v-if="props.row.isEdit">
								<viewer :images="user_img">
									<img :src="user_img[0].url" style="width: 60px;height: 60;border:1px solid #eee;border-radius: 5px;"/>
								</viewer>
							</el-form-item>

第二步

源码:

//设置row-key只展示一行
			expands: [],//只展开一行放入当前行id
			getRowKeys(row){
				return row.id
			},

第三步

代码:

//表格当前行被展开或收起
		expandChange(row,expandedRows) {
			let that=this
			console.log(expandedRows);
			//只展开一行
			if (expandedRows.length) {//说明展开了
              that.expands = []
              if (row) {
                that.expands.push(row.id)//只展开当前行id
              }
            } else {//说明收起了
              that.expands = []
            }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值