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

 </el-tabs>

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

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

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

<el-tab-pane>

        <span slot="label">

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

        </span>

</el-tab-pane>

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

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

整体代码：

<template>

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

</template>

<script> 

        export default {

                data() {

                    return { activeName: 'first' }

                },

                methods: {

                        beforeLeave(visitName, currentName) {

                            if(visitName = "CustoBtn") {                      

                                    return false;

                            }

                        }

                }

        }                

</script>