Element Ui的table表格展开行，展开一行另一行自动收起

最新推荐文章于 2024-09-12 09:46:44 发布

元气满满ya~

最新推荐文章于 2024-09-12 09:46:44 发布

阅读量2.9k

点赞数 2

文章标签： vue elementui

本文链接：https://blog.csdn.net/m0_65376942/article/details/123902921

版权

本文介绍如何在 Element UI 的 Table 组件中实现展开一行时，其他行自动收起的效果。通过监听行展开事件，控制其他行的展开状态，确保每次只展开一行，以优化用户查看数据的体验。

摘要由CSDN通过智能技术生成

<template>
	<div style="margin: 20px;" class="Box">
		<el-table ref="table"  stripe fit highlight-current-row :data="tableData" style="width:800px">
			<el-table-column label="商品 ID" prop="id"></el-table-column>
			<el-table-column label="名称" prop="name" align="center"></el-table-column>
			<el-table-column label="描述" prop="desc"></el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<span v-if="scope.row.id==currentIndex">
                <el-button
                type="text"
                @