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

最新推荐文章于 2024-06-15 14:41:39 发布

码农研究僧

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量382

点赞数 8

分类专栏：前端/小程序文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_47872288/article/details/139140193

版权

前端/小程序专栏收录该内容

53 篇文章 1 订阅

订阅专栏

前言

正常间距如下：

在这里插入图片描述

其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>