element-ui怎么实现竖排tab

tonysh_zds

已于 2022-07-27 14:29:13 修改

阅读量1.6k

点赞数

分类专栏： vue 文章标签： Element-UI tab组件竖排横排文字样式调整

于 2022-07-27 14:28:30 首次发布

本文链接：https://blog.csdn.net/tonysh_zds/article/details/126013955

版权

vue 专栏收录该内容

91 篇文章 1 订阅

订阅专栏

element-ui的tab组件可以通过 tab-position: left 来竖排展示但是字还是横排的。

怎么实现如下图这种效果呢
在这里插入图片描述

<template>
  <div class="tabBox">
    <el-tabs :tab-position="tabPosition" style="height: 200px;">
      <el-tab-pane label="全文检索">
        <version-item></version-item>
      </el-tab-pane>
      <el-tab-pane label="系统功能">
        <Explain></Explain>
      </el-tab-pane> 
    </el-tabs>
  </div>
</template>
<script>
    import VersionItem from '@/views/item/version/version'
    import Explain from './explain'
    export default {
        components: {
            VersionItem,
            Explain
        },
        data() {
            return {
                tabPosition: 'right'
            }
        }
    }

</script>

<style lang="scss">
  .tabBox{
    margin-top: 20px;
    .el-tabs--right{
      height: auto !important;
      .el-tabs__item{
        width: 60px;
        line-height: 24px;
        height: auto;
        word-wrap: break-word;
        white-space: pre-line;
        margin-bottom: 20px;
      }
    }
  }
</style>