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

先看效果
el-tabs element-ui 标签页增加按钮_第1张图片

<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>

你可能感兴趣的:(ui,vue.js,前端)