通过 router-tab
组件的默认作用域插槽,我们可以自定义页签显示的内容
插槽的作用域提供以下属性供模板使用:
id
, title
, icon
, closable
等示例:
<router-tab>
<template v-slot="{ tab: { id, title, icon, closable }, tabs, index}">
<i v-if="icon" class="tab-icon" :class="icon"></i>
<span class="tab-title">{{title || '未命名页签'}}</span>
<span class="tab-badge">{{index}}</span>
<i class="tab-close el-icon-close" v-if="closable !== false &&tabs.length > 1" @click.prevent="$routerTab.close(id)"></i>
</template>
</router-tab>