el-tabs element-ui 标签页增加按钮

山城️777

已于 2024-01-10 14:30:49 修改

阅读量1.2k

点赞数 11

文章标签： ui vue.js 前端

于 2024-01-10 14:29:45 首次发布

本文链接：https://blog.csdn.net/weixin_44019553/article/details/135502455

版权

本文介绍了如何在Vue中使用ElementUI的el-tabs组件创建多标签页，并展示了如何在特定标签页中添加禁用状态以及自定义导出按钮。同时，还涉及了CSS样式定制以调整导航栏布局。

摘要由CSDN通过智能技术生成

先看效果
在这里插入图片描述

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="(item, i) in tabList"
      :key="i"
      :label="item.label"
      :name="item.name"
    >其他的标签页
    </el-tab-pane>
    <el-tab-pane disabled>
      <slot slot="label">
        <el-button
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </slot>
    </el-tab-pane>
</el-tabs>

<style>
// 导出按钮的样式
::v-deep .el-tabs__nav {
  width: 100%;
}
::v-deep .el-tabs__item.is-top:last-child {
  float: right;
}
</style>