el-tabs标签栏之间设置margin

您可以使用 CSS 中的 margin 属性来为 el-tabs 标签栏之间设置间距。例如，如果您希望每个标签之间的间距为 10 像素，可以像这样设置 CSS 样式：

.el-tabs__nav-wrap::before,
.el-tabs__nav-wrap::after {
  content: '';
  display: table;
}
.el-tabs__nav-wrap::after {
  clear: both;
}
.el-tabs__nav {
  margin-bottom: 0;
  margin-left: -10px;
  margin-right: -10px;
}
.el-tabs__item {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

这将为每个标签之间添加 10 像素的间距。请注意，这只是一种示例方法，您可以根据需要进行调整。

相关问题

el-tabs el-tab-pane 封装

以下是一个简单的 el-tabs 和 el-tab-pane 的封装示例：

<template>
  <div class="my-tabs">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="Tab 1" name="tab1">
        <p>Content of Tab Pane 1</p>
      </el-tab-pane>
      <el-tab-pane label="Tab 2" name="tab2">
        <p>Content of Tab Pane 2</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "MyTabs",
  data() {
    return {
      activeTab: "tab1"
    };
  }
};
</script>

<style scoped>
.my-tabs {
  max-width: 600px;
  margin: 0 auto;
}
</style>

在这个示例中，我们创建了一个名为 MyTabs 的组件，它包含了 el-tabs 和两个 el-tab-pane。我们使用 v-model 指令绑定了 el-tabs 的活动标签页，这样在切换标签页时，activeTab 的值也会变化。我们还为 MyTabs 组件设置了一个最大宽度和居中样式。

你可以将这个示例作为模板，根据自己的需要进行修改，以创建符合你需求的 el-tabs 和 el-tab-pane 组件。

el-tabs设置左边竖向排版

在Element UI库中，`el-tabs`组件默认是水平排列的选项卡。如果想要实现左侧竖向排版，你可以通过CSS自定义样式或者组合其他HTML元素来达到这个效果。这里提供一种思路：

首先，你需要保持`el-tabs`本身的结构不变，它通常包含一个`el-tabs__nav`用于导航标签，和一个`el-tabs__content`用于内容区域。

然后，可以尝试使用CSS调整布局，例如给`el-tabs`容器添加一个固定宽度，并让`el-tabs__nav`浮动到左边，同时将`el-tabs__content`放到`el-tabs`容器的右侧：

<style>
  .custom-tabs {
    display: flex;
    width: 400px; /* 自定义宽度 */
  }
  
  .custom-tabs .el-tabs__nav {
    float: left;
    width: 60%; /* 或者你希望的百分比 */
  }
  
  .custom-tabs .el-tabs__content {
    margin-left: 70%; /* 计算后的值，等于nav宽度加上一些间距 */
  }
</style>

<el-tabs class="custom-tabs">
  <!-- ... -->
</el-tabs>

这样就可以实现左侧导航栏竖向显示，而主要内容则紧随其后。