使用element-ui和vue3实现tab页

安装element-ui和vue3

npm i element-ui vue@next

引入和注册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');

创建一个tab组件

<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>

在应用中使用tab组件

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

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

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