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

前言

正常间距如下：

在这里插入图片描述

其Demo如下：

<el-table-column label="操作" align="center">
  <template #default="scope">
    <el-button
      link
      type="primary"
      @click="openForm('update', scope.row.id)"
      v-hasPermi="['dangerous:appointment-commission:update']"
    >
      详情
    </el-button>
    <el-button
      link
      type="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-button
      class="action-button"
      link
      type="primary"
      @click="openForm('update', scope.row.id)"
      v-hasPermi="['dangerous:appointment-commission:update']"
    >
      详情
    </el-button>
    <el-button
      class="action-button"
      link
      type="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-button
        link
        type="primary"
        @click="openForm('update', scope.row.id)"
        v-hasPermi="['dangerous:appointment-commission:update']"
      >
        详情
      </el-button>
      <el-button
        link
        type="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>