vue elementUi中的tabs标签页如何使用

发布时间：2023-03-23 16:25:17 作者：iii
来源：亿速云阅读：480

Vue ElementUI 中的 Tabs 标签页如何使用

1. 引言

在前端开发中，标签页（Tabs）是一种常见的 UI 组件，用于在不同的内容面板之间进行切换。ElementUI 是一个基于 Vue.js 的 UI 组件库，提供了丰富的组件，其中就包括 Tabs 标签页组件。本文将详细介绍如何在 Vue 项目中使用 ElementUI 的 Tabs 标签页组件，包括基本用法、动态生成标签页、自定义样式、事件处理等内容。

2. 安装 ElementUI

在开始使用 ElementUI 的 Tabs 组件之前，首先需要确保你的 Vue 项目中已经安装了 ElementUI。如果还没有安装，可以通过以下命令进行安装：

npm install element-ui --save

安装完成后，在项目的 main.js 文件中引入 ElementUI 并注册：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 基本用法

3.1 基本结构

ElementUI 的 Tabs 组件由 el-tabs 和 el-tab-pane 两个主要部分组成。el-tabs 是标签页的容器，el-tab-pane 是每个标签页的内容面板。

以下是一个简单的 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: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

3.2 属性说明

v-model：绑定当前激活的标签页的 name 值。
label：标签页的标题。
name：标签页的唯一标识符，用于区分不同的标签页。

3.3 事件说明

tab-click：当标签页被点击时触发的事件，回调参数为被点击的标签页实例和事件对象。

4. 动态生成标签页

在实际开发中，标签页的内容可能是动态生成的。ElementUI 的 Tabs 组件支持通过 v-for 指令动态生成标签页。

以下是一个动态生成标签页的示例：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
    >
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1',
      tabs: [
        { label: '标签1', name: '1', content: '标签1内容' },
        { label: '标签2', name: '2', content: '标签2内容' },
        { label: '标签3', name: '3', content: '标签3内容' },
        { label: '标签4', name: '4', content: '标签4内容' }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

在这个示例中，tabs 数组中的每个对象代表一个标签页，通过 v-for 指令动态生成标签页。

5. 自定义样式

ElementUI 的 Tabs 组件提供了丰富的样式自定义选项，可以通过 type、tab-position 等属性来调整标签页的外观。

5.1 类型

type 属性用于设置标签页的类型，可选值有 card 和 border-card。

<el-tabs v-model="activeName" type="card">
  <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
</el-tabs>

5.2 标签位置

tab-position 属性用于设置标签的位置，可选值有 top、right、bottom 和 left。

<el-tabs v-model="activeName" tab-position="left">
  <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
</el-tabs>

5.3 自定义样式类

可以通过 class-name 属性为标签页添加自定义样式类。

<el-tabs v-model="activeName" class-name="custom-tabs">
  <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
</el-tabs>

<style>
.custom-tabs .el-tabs__item {
  color: red;
}
</style>

6. 事件处理

ElementUI 的 Tabs 组件提供了多个事件，用于处理标签页的各种交互行为。

6.1 `tab-click` 事件

tab-click 事件在标签页被点击时触发，回调参数为被点击的标签页实例和事件对象。

<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-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log('当前激活的标签页:', tab.name);
    }
  }
};
</script>

6.2 `tab-remove` 事件

tab-remove 事件在标签页被移除时触发，回调参数为被移除的标签页实例。

<template>
  <el-tabs v-model="activeName" @tab-remove="handleRemove">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
      closable
    >
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1',
      tabs: [
        { label: '标签1', name: '1', content: '标签1内容' },
        { label: '标签2', name: '2', content: '标签2内容' },
        { label: '标签3', name: '3', content: '标签3内容' },
        { label: '标签4', name: '4', content: '标签4内容' }
      ]
    };
  },
  methods: {
    handleRemove(tab) {
      console.log('移除的标签页:', tab.name);
      this.tabs = this.tabs.filter(t => t.name !== tab.name);
    }
  }
};
</script>

6.3 `tab-add` 事件

tab-add 事件在标签页被添加时触发，回调参数为被添加的标签页实例。

<template>
  <el-tabs v-model="activeName" @tab-add="handleAdd">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
    >
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
  <el-button @click="addTab">添加标签页</el-button>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1',
      tabs: [
        { label: '标签1', name: '1', content: '标签1内容' },
        { label: '标签2', name: '2', content: '标签2内容' },
        { label: '标签3', name: '3', content: '标签3内容' },
        { label: '标签4', name: '4', content: '标签4内容' }
      ]
    };
  },
  methods: {
    handleAdd(tab) {
      console.log('添加的标签页:', tab.name);
    },
    addTab() {
      const newTabName = `newTab${this.tabs.length + 1}`;
      this.tabs.push({
        label: `标签${this.tabs.length + 1}`,
        name: newTabName,
        content: `标签${this.tabs.length + 1}内容`
      });
      this.activeName = newTabName;
    }
  }
};
</script>

7. 高级用法

7.1 嵌套 Tabs

在某些情况下，可能需要在一个标签页中嵌套另一个 Tabs 组件。ElementUI 的 Tabs 组件支持嵌套使用。

<template>
  <el-tabs v-model="outerActiveName">
    <el-tab-pane label="外层标签1" name="outer1">
      <el-tabs v-model="innerActiveName">
        <el-tab-pane label="内层标签1" name="inner1">内层标签1内容</el-tab-pane>
        <el-tab-pane label="内层标签2" name="inner2">内层标签2内容</el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="外层标签2" name="outer2">外层标签2内容</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      outerActiveName: 'outer1',
      innerActiveName: 'inner1'
    };
  }
};
</script>

7.2 懒加载

对于内容较多的标签页，可以使用 lazy 属性实现懒加载，只有在标签页被激活时才会渲染内容。

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="用户管理" name="first" lazy>
      用户管理内容
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second" lazy>
      配置管理内容
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  }
};
</script>

7.3 自定义标签页标题

可以通过 slot 自定义标签页的标题内容。

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane name="first">
      <template #label>
        <span><i class="el-icon-user"></i> 用户管理</span>
      </template>
      用户管理内容
    </el-tab-pane>
    <el-tab-pane name="second">
      <template #label>
        <span><i class="el-icon-setting"></i> 配置管理</span>
      </template>
      配置管理内容
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  }
};
</script>

8. 总结

ElementUI 的 Tabs 组件是一个非常强大且灵活的 UI 组件，适用于各种需要标签页切换的场景。通过本文的介绍，你应该已经掌握了如何在 Vue 项目中使用 ElementUI 的 Tabs 组件，包括基本用法、动态生成标签页、自定义样式、事件处理以及一些高级用法。希望这些内容能够帮助你在实际开发中更好地使用 ElementUI 的 Tabs 组件。