elementui实现tab选项卡

element-ui实现tab选项卡的基本用法可以通过el-tabs和el-tab-pane组件来实现。首先，需要在data中定义一个变量来控制当前选中的标签页，然后使用v-model指令将el-tabs的value属性与该变量进行绑定。接下来，在el-tabs中使用v-for指令遍历标签页，并使用el-tab-pane组件来创建每个标签页。在el-tab-pane中，使用:label属性来设置标签页的标题，使用:name属性来设置标签页的唯一标识符。最后，可以在el-tab-pane的内容区域插入需要显示的内容。

对于自定义标签页样式，可以使用插槽来实现。在el-tab-pane中，可以使用slot="label"来定义一个插槽，然后在插槽中编写自定义的标签页内容，可以包含任意的HTML元素和Vue指令。

下面是具体的代码示例：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="item in tabs" :label="item.count ? item.title + ' ' + item.count : item.title"
      :name="item.value" :key="item.id">
      <div slot="label">
        <span class="key">{{ item.title }}</span>
        <span class="value" v-if="item.count">{{ item.count }}</span>
      </div>
      {{ item.id }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tabs: [
        { title: "消息", value: "first", count: 3, id: 1 },
        { title: "待办", value: "second", count: 4, id: 2 },
        { title: "角色管理", value: "third", id: 3 }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style scoped>
.value {
  color: #ff0000;
  font-size: 16px;
}
</style>

以上代码实现了一个基本的tab选项卡，每个标签页都有一个标题和一个可选的数字，点击标签页会触发handleClick方法。