vue学习记录：vue表格列中按钮隐藏但保留位置

原创已于 2025-05-06 16:42:21 修改 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #javascript

于 2025-05-06 16:34:58 首次发布

前端vue 专栏收录该内容

3 篇文章

订阅专栏

vue学习记录：vue表格列中按钮隐藏但保留位置

比如有个表格：
<el-table>
	 <el-table-column label="操作" min-width="3" align="left">
		<template #default="{row}" style="display: flex;">
			<el-button type="primary" :icon="Edit" @click="handleEdit(row)">编辑</el-button>
			<el-button :type="success" :icon="CirclePlus" @click="showAdd(row.id)">新增</el-button>
			<el-button type="danger" :icon="Delete" @click="handleDelete(row.id)">删除</el-button>
		</template>
	</el-table-column>
 </el-table>

如果想让列中第二个新增按钮动态不可见，但保留位置，不让后面的第三个按钮前移。可以使用visibility属性
:style=“{ visibility: isVisible ? ‘visible’ : ‘hidden’ }”

具体写法可以结合表row数据，比如：
<el-button :style=“{visibility: row.level <= 2 ? ‘visible’ : ‘hidden’}” type=“success” :icon=“CirclePlus” @click=“showAdd(row.id)”>新增

效果如下：
在这里插入图片描述