elementUI使用el-tab与el-badge显示数量脚标

在Element UI中，el-tab 和 el-badge 组件可以一起使用来在标签页上显示未读消息的数量。以下是一个简单的例子，展示了如何结合使用这两个组件：

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="用户管理" name="first">
      <span slot="label"><el-badge :value="10" class="item">用户管理</el-badge></span>
      用户管理相关内容
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">
      <span slot="label"><el-badge :value="1" class="item">配置管理</el-badge></span>
      配置管理相关内容
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  }
};
</script>
 
<style>
.item {
  margin-left: 10px;
}
</style>

在这个例子中，我们有两个标签页，每个标签页都使用了 el-badge 组件来显示一个数字。:value 属性绑定到一个数字，表示要显示的数量。我们还可以使用 el-badge 的其他属性，比如 max 来限制数字显示的最大值，或者 is-dot 来显示一个小红点而不是数字。