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>

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

相关问题

.el-tabs--card>.el-tabs__header .el-tabs__nav 的border属性如何在css中修改

要修改`.el-tabs--card > .el-tabs__header .el-tabs__nav`的`border`属性，可以使用CSS来实现。下面是一个示例代码：

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 2px solid red; /* 设置边框为2px宽度、红色 */
}

在上述代码中，我们将`border`属性设置为2像素的红色边框。您可以根据需要调整边框的宽度和颜色。

如果您需要进一步自定义边框样式，可以使用其他`border`属性的值，例如`border-style`来指定边框样式（如实线、虚线、点线等）或者使用`border-color`来指定边框颜色。

希望这对您有所帮助！如果您还有其他问题，请随时提问。

el-tabs标题竖向显示

可以使用 CSS 的 writing-mode 属性来实现 el-tabs 标题竖向显示。具体实现方法如下：

1. 给 el-tabs 组件添加一个自定义类名，例如 vertical-tabs。
2. 在 CSS 中为该类名设置样式，包括设置 writing-mode 为 vertical-lr（从上到下排列）或 vertical-rl（从下到上排列），设置宽度和高度等。
3. 在 el-tabs 的子组件 el-tab-pane 中添加一个自定义类名，例如 vertical-tab-pane。
4. 在 CSS 中为该类名设置样式，包括设置 display 为 flex，flex-direction 为 column，height 为 100% 等。

示例代码如下：

HTML：

<el-tabs class="vertical-tabs">
  <el-tab-pane label="标签一" class="vertical-tab-pane">标签一的内容</el-tab-pane>
  <el-tab-pane label="标签二" class="vertical-tab-pane">标签二的内容</el-tab-pane>
  <el-tab-pane label="标签三" class="vertical-tab-pane">标签三的内容</el-tab-pane>
</el-tabs>

CSS：

.vertical-tabs {
  writing-mode: vertical-lr;
  width: 100px;
  height: 300px;
}

.vertical-tab-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}