组件-Element—Tabs （标签页）

最新推荐文章于 2024-09-22 13:03:17 发布

ForeverJPB.

最新推荐文章于 2024-09-22 13:03:17 发布

阅读量7.9k

点赞数

分类专栏：组件---Element 文章标签： Element

本文链接：https://blog.csdn.net/GU_AO_SHI_TAI_DU/article/details/94615171

版权

这篇博客深入介绍了Element UI库中的Tabs组件，包括基础用法、不同样式选项（如卡片化）、位置调整、自定义标签页内容以及如何动态增减标签页。同时，提到了Tabs组件的属性和事件，以及Tab-pane的相关属性，为开发者提供了全面的使用参考。

摘要由CSDN通过智能技术生成

组件-Element—Tabs （标签页）

组件— 标签页

基础用法
在这里插入图片描述

<template>
  <el-tabs v-model="activeName" @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>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

选项卡样式
在这里插入图片描述

<template>
  <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>
</template>
<script>
  export default {
    data() {
      re

最低0.47元/天解锁文章