el-tab-pane横向和纵向同时显示

要实现 `el-tab-pane` 在横向和纵向同时显示，可以借助 `flex` 布局和一些自定义样式来实现。下面是示例：

<template>
  <div class="tab-pane-container">
    <el-tabs type="border-card" tab-position="left">
      <el-tab-pane label="Tab 1" name="tab1">
        Content for Tab 1
      </el-tab-pane>
      <el-tab-pane label="Tab 2" name="tab2">
        Content for Tab 2
      </el-tab-pane>
      <el-tab-pane label="Tab 3" name="tab3">
        Content for Tab 3
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style>
.tab-pane-container {
  display: flex;
}

.el-tabs {
  flex: 1;
}

.el-tabs__header {
  flex-direction: column;
}

.el-tabs__nav-wrap {
  flex-direction: row;
}
</style>

在上面的示例中，我们使用了 `flex` 布局来让 `tab-pane-container` 成为一个横向容器。然后，通过设置 `el-tabs` 的 `type` 属性为 `border-card`，使得选项卡具有边框卡片样式。接着，设置 `tab-position` 属性为 `left`，使得选项卡垂直排列在左侧。

最后，通过自定义样式来调整选项卡头部和选项卡导航的布局。将 `el-tabs__header` 的 `flex-direction` 设置为 `column`，使得选项卡头部垂直排列。将 `el-tabs__nav-wrap` 的 `flex-direction` 设置为 `row`，使得选项卡导航水平排列。

这样就可以实现 `el-tab-pane` 在横向和纵向同时显示了。你可以根据自己的需求进行调整和修改样式。