需求:

需要在tabs页签切换栏的最右边添加一个按钮。如图:

实现方案:

使用CSS来实现,css原理解释:

1.如果div的position设置了relative属性,但是没有指定偏移量,则相当于默认的position:static;

2.position:static 默认值,没有定位,元素出现在正常的流中;

3.position:absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位(往上寻找参照元素,一直到根元素为止,即body);

代码如下:

<div style='position: relative;'>
  <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="Tab页签标题1" name="first">Tab页签内容1</el-tab-pane>
    <el-tab-pane label="Tab页签标题2" name="second">Tab页签内容2</el-tab-pane>
  </el-tabs>
    <el-button size='mini' style='position: absolute;right:10px;top:5px;'>右边按钮</el-button>
  </div>

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐