如何在 Element UI 标签页最左边添加额外元素并隐藏？-小浪资源网

如何在 Element UI 标签页最左边添加额外元素并隐藏？

如何向 element ui 标签页最左边的选项卡前添加额外元素？

在 element ui 标签页中，如果需要在最左边的选项卡前添加额外的元素（如按钮或 div），并希望该元素通过 v-show 隐藏且不占用选项卡的位置。以下是实现方法：

对于纯 css 解决方案：

如果右侧的扩展按钮不需要，可以采用 flex 布局进行调整，将额外元素挤到右边。
如果需要右侧扩展按钮，则 css 解决方案失效，需要修改组件源码。

element ui 代码实现：

<el-tabs><!-- 额外元素，可通过 v-show 隐藏 --><div class="extra-element" v-show="showExtra">     <button>额外按钮</button>   </div>    <!-- 选项卡 -->   <el-tab-pane label="选项卡 1">...</el-tab-pane><el-tab-pane label="选项卡 2">...</el-tab-pane></el-tabs><style> .extra-element {   position: absolute;   top: 0;   left: 0;   display: flex;   align-items: center;   justify-content: center;   width: 40px;   height: 40px;   background: #ccc; } </style>

登录后复制

文章版权归作者所有，未经允许请勿转载。【小浪云服务商 - 服务器12元起 - 挂机宝5元起】

THE END