第一种：多行点击展开其他行不收起
先看效果图
直接上代码
【核心代码添加标注简单易懂】
<el-tableref="multipleTable":data="smsLogList.slice((currentPage - 1) * pageSize_, currentPage * pageSize_)"tooltip-effect="dark"style="width: 100%"row-key="id" 【核心代码】:expand-row-keys="expands"【核心代码】><el-table-column label="短信模板" align="center" prop="templateName" /><el-table-column label="接收方" align="center" prop="receiverPhoneNumber" /><el-table-column label="发送时间" align="center" prop="sendTime" />【展开部分】<el-table-column type="expand"><template slot-scope="props"><el-form label-position="right" inline class="demo-table-expand"><el-form-item><span>{{ props.row.templateName }}</span></el-form-item></el-form></template></el-table-column>【操作列】<el-table-column label="操作" width="120"><template #default="scope"><el-linkstyle="color:#1890ff"@click="handleRowClick(scope.row)">{{ scope.row.id == expands.filter((val) => val == scope.row.id) ? "收起" : "展开" }}</el-link></template></el-table-column></el-table>
data中定义： expands：[]
handleRowClick(row) {if (this.expands.includes(row.id)) {this.expands = this.expands.filter((val) => val !== row.id)} else {this.expands.push(row.id)}},
第二种：多行点击展开其他行自动收起：手风琴效果
【修改】标注就是跟第一种代码不同的地方：两处修改
<el-tableref="multipleTable":data="smsLogList.slice((currentPage - 1) * pageSize_, currentPage * pageSize_)"tooltip-effect="dark"style="width: 100%"row-key="id" :expand-row-keys="expands"><el-table-column label="短信模板" align="center" prop="templateName" /><el-table-column label="接收方" align="center" prop="receiverPhoneNumber" /><el-table-column label="发送时间" align="center" prop="sendTime" /><el-table-column type="expand"><template slot-scope="props"><el-form label-position="right" inline class="demo-table-expand"><el-form-item><span>{{ props.row.templateName }}</span></el-form-item></el-form></template></el-table-column><el-table-column label="操作" width="120"><template #default="scope"><el-linkstyle="color:#1890ff"@click="handleRowClick(scope.row)">{{ scope.row.id == expands[0]) ? "收起" : "展开" }}</el-link> 【修改】</template></el-table-column></el-table>
data中定义： expands：[]
handleRowClick(row) {if (this.expands.includes(row.id)) {this.expands = this.expands.filter((val) => val !== row.id)} else {this.expands=[] 【修改】this.expands.push(row.id)}},
隐藏elementUI 展开行 > 图标
::v-deep .el-table__expand-icon{visibility: hidden;
}
注意
row-key="id" 这里是设置了每行的唯一值，所以表格数组对象中是需要有id的，如果没有可以手动添加
代码
for (let i = 0; i < this.smsLogList.length; i++) {this.smsLogList[i].id = i + 1}
