el-table展开行,仅展开单行,部分不可展开

在这里插入图片描述
使用场景:
饿了么的table展开行,通常可以用来展示一些详细信息,或者二级列表,表格等等内容。
但过多的展开会使得页面显得混乱,所以此类功能中常有要求,一次仅打开一行。自然就会出现禁止打开某一行的情况。相应实现方式如下

<el-table
                ref="myTable"
                :data="tableData"
                show-summary
                :summary-method="getSummaries"
                @selection-change="handleSelectionChange"
                @sort-change="sortChange"
                @filter-change="handleFilterChange"
                border
                :row-key="getRowKey"
                :expand-row-keys='expands'
                @expand-change="expandChange"
                >
:row-key="getRowKey"              //行数据的 Key,唯一值没啥说的
:expand-row-keys='expands'        //展开行的集合,记得声明,是个数组
@expand-change="expandChange"     //点击展开行的方法
expandChange(row, expandedRows) {
            console.log(row, expandedRows)
            this.expands = [];
            if(row.id=='1234567890') {         //满足条件才可以展开
                this.expands.push([])
            }else
            if(expandedRows.length>0) {        //仅可以展开一行
                this.expands.push(row?row.id:[])
            }
        },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值