详细分析Vue按钮间距的优化方式（附Demo）

本文主要是介绍详细分析Vue按钮间距的优化方式（附Demo），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

正常间距如下：

在这里插入图片描述

其Demo如下：

<el-table-column label="操作" align="center"><template #default="scope"><el-buttonlinktype="primary"@click="openForm('update', scope.row.id)"v-hasPermi="['dangerous:appointment-commission:update']">详情</el-button><el-buttonlinktype="danger"@click="handleDelete(scope.row.id)"v-hasPermi="['dangerous:appointment-commission:delete']">删除</el-button></template>
</el-table-column>

1. 按钮间距

<el-table-column label="操作" align="center"><template #default="scope"><el-buttonclass="action-button"linktype="primary"@click="openForm('update', scope.row.id)"v-hasPermi="['dangerous:appointment-commission:update']">详情</el-button><el-buttonclass="action-button"linktype="danger"@click="handleDelete(scope.row.id)"v-hasPermi="['dangerous:appointment-commission:delete']">删除</el-button></template>
</el-table-column>

其CSS如下：

<style>
.action-button {margin-right: 10px; /* 调整间距 */
}
</style>

截图如下：

在这里插入图片描述

2. 垂直间距

<el-table-column label="操作" align="center"><template #default="scope"><div class="action-buttons"><el-buttonlinktype="primary"@click="openForm('update', scope.row.id)"v-hasPermi="['dangerous:appointment-commission:update']">详情</el-button><el-buttonlinktype="danger"@click="handleDelete(scope.row.id)"v-hasPermi="['dangerous:appointment-commission:delete']">删除</el-button></div></template>
</el-table-column>

其CSS如下：

<style>
.action-buttons {display: flex;flex-direction: column;
}.action-buttons .el-button {margin-bottom: 5px; /* 调整垂直间距 */
}.action-buttons .el-button:last-child {margin-bottom: 0;
}
</style>