<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>
以上代碼呈現(xiàn)的下面這個樣子
但是想要在最后一個tab加一個btn（刷新按鈕）類似于下圖
需要用到用到官方給出的自定義標簽頁的寫法
<el-tab-pane>
????????<span slot="label">
? ? ? ? ? ? ? ?<el-link type="primary" :underline="false">刷新</el-link>
? ? ????</span>
</el-tab-pane>
這樣就實現(xiàn)按鈕樣式了馍资，但是點擊后發(fā)現(xiàn)會劃走，進入刷新下默認渲染的box
這就需要在這個el-tab-pane加入一個name標識桥帆，并在el-tabs中加入before-leave監(jiān)聽猫态，監(jiān)聽到點擊其他el-tab-pane時離開當前el-tab-pane之前脸哀，獲取即將進入的el-tab-pane的name图筹，并進行攔截篇裁，不允許觸發(fā)顯示相應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>?
