elementUI 弹窗居中 并且tabs组件 tab-position=“left“时显示的样式优化

在Element UI中，当你使用tabs组件并将tab-position属性设置为left时，弹窗中的tabs组件默认是垂直居中的。如果你想要优化显示样式，可以通过自定义CSS来实现。

以下是一个例子，展示了如何通过自定义CSS来调整弹窗中tabs组件的样式，使其在tab-position="left"时也可以水平居中：

<template>
  <el-dialog :visible.sync="dialogVisible" custom-class="custom-dialog">
    <el-tabs value-key="name" tab-position="left">
      <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">
        {{ item.content }}
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: true,
      tabs: [
        { name: 'tab1', label: 'Tab 1', content: 'Content 1' },
        { name: 'tab2', label: 'Tab 2', content: 'Content 2' }
      ]
    };
  }
};
</script>
 
<style scoped>
.custom-dialog /deep/ .el-tabs--left .el-tabs__item {
  /* 调整标签的样式 */
}
 
.custom-dialog /deep/ .el-tabs--left .el-tabs__active-bar {
  /* 调整选中栏的样式 */
}
 
.custom-dialog /deep/ .el-tabs--left .el-tabs__content {
  margin-left: 100px; /* 根据需要调整内容区域的左外边距以居中 */
}
</style>

在上述代码中，.custom-dialog是为弹窗添加的自定义类，用于定位样式范围。/deep/是一个作用于子组件样式的SASS/SCSS语法，确保可以覆盖子组件的样式。你需要根据实际情况调整.el-tabs__item、.el-tabs__active-bar和.el-tabs__content的CSS样式，以达到你想要的显示效果。

请注意，Element UI版本更新可能会导致组件的类名发生变化，因此上述代码可能需要根据你所使用的Element UI版本进行相应的调整。