el-table 点击行-显示当前展开行

不怪的怪怪

于 2024-03-06 11:29:32 发布

阅读量1.2k

点赞数 5

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_44109588/article/details/136500813

版权

// 定义@row-click事件 
// 添加 type="expand" 展开行 width="1"可以使箭头隐藏
<el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @row-click="rowClick">
	<el-table-column type="expand" width="1" class-name="expand_pd_0">
		<template #default="scope">
			<el-descriptions title="" :column="4" border>
                <el-descriptions-item label="流水号" label-align="right" align="center" :span="1">
			        {{ scope.row.orderNumber || '空' }}
			    </el-descriptions-item>
		    </el-descriptions>
		</template>
	</el-table-column>
</el-table>



// 方法
const multipleTableRef = ref()
const rowClick = (row, column, event) => {
	multipleTableRef.value.toggleRowExpansion(row);
}