element-ui 中 el-tabs在el-tab-pane后加入按钮或自定义内容

element-ui 中 el-tabs在el-tab-pane后加入按钮或自定义内容

<el-tabs v-model=“activeName” type=“card” @tab-click=“handleClick”>

    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>

    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

以上代码呈现的下面这个样子

但是想要在最后一个tab加一个btn（刷新按钮）类似于下图

需要用到用到官方给出的自定义标签页的写法

    <span slot="label">

           <el-link type="primary" :underline="false">刷新</el-link>

    </span>

这样就实现按钮样式了，但是点击后发现会划走，进入刷新下默认渲染的box

这就需要在这个el-tab-pane加入一个name标识，并在el-tabs中加入before-leave监听，监听到点击其他el-tab-pane时离开当前el-tab-pane之前，获取即将进入的el-tab-pane的name，并进行拦截，不允许触发显示相应box的操作

整体代码：

<div>

        <el-tabs v-model="activeName" type="card" :before-leave="beforeLeave">

                <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>

                <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

                <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

                <el-tab-pane name="CustoBtn">

                         <span slot="label">

                                 <el-link type="primary" :underline="false">刷新</el-link>

                         </span>

                </el-tab-pane>

</div>

作者：我寄你的信总要送往邮局
链接：https://www.jianshu.com/p/e0bfa212e03a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。