Vue3 Element-UI 实现 Tab 页 - 完整指南

Vue3 使用 Element-UI 实现 Tab 页

本文将详细介绍如何在 Vue3 项目中使用 Element-UI 库实现 Tab 页，涵盖安装、配置、组件创建和应用等步骤。

1. 安装 Element-UI 和 Vue3

首先，你需要安装 Element-UI 和 Vue3：

npm i element-ui vue@next

2. 引入和注册 Element-UI 和 Vue3

在你的 main.js 文件中，引入并注册 Element-UI 和 Vue3：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3. 创建一个 Tab 组件

创建一个名为 Tab.vue 的组件，代码如下：

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

<script>
export default {
  data() {
    return {
      activeName: '',
      tabs: [
        {
          name: 'tab1',
          label: 'Tab 1',
          content: 'This is tab 1 content.'
        },
        {
          name: 'tab2',
          label: 'Tab 2',
          content: 'This is tab 2 content.'
        },
        {
          name: 'tab3',
          label: 'Tab 3',
          content: 'This is tab 3 content.'
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
    }
  }
};
</script>

<style scoped>
.tab {
  margin: 20px;
}
</style>

4. 在应用中使用 Tab 组件

最后，在你的 App.vue 文件中引入并使用 Tab 组件：

<template>
  <div id='app'>
    <Tab />
  </div>
</template>

<script>
import Tab from './components/Tab.vue';

export default {
  components: {
    Tab
  }
};
</script>

现在，你成功地在你的 Vue3 应用中使用 Element-UI 创建了一个 Tab 页。你可以根据需要自定义 Tab 页的内容和样式。