使用插槽的方式,在el-tab-pane中加入el-dropdown组件
根据command值设置el-dropdown-item高亮
<el-tabs v-model="activeName" class="main-tabs">
<el-tab-pane label="人员概况" name="person">
<template #label>
<el-dropdown class="center" trigger="click" @command="setCommand">
<span>
人员概况
<el-icon>
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
:class="{ select: 'person' === command }"
command="person"
>人员</el-dropdown-item
>
<el-dropdown-item
:class="{ select: 'user' === command }"
command="user"
>用户</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-tab-pane>
</el-tabs>
export default {
components: {},
data() {
return {
command:"person"
},
methods: {
/** 下拉菜单设置高亮 */
setCommand(command) {
this.command = command
},
<style lang="scss" scoped>
.center {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
:deep(.select) {
background-color: #e4f5f5;
color: #38c2c2;
}
</style>