vue+elementui实现选项卡功能

好的。那么我们就来一步一步地详细讲解如何用 Vue 和 ElementUI 实现选项卡功能。

1. 引入和注册 ElementUI 组件库

首先我们需要在项目中引入 ElementUI 组件库。可以使用命令行安装：

npm install element-ui -S

然后在项目中使用该组件库，需要在 Vue 中进行注册。可以在 main.js 或相应的组件中进行注册：

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

Vue.use(ElementUI)

这样我们就可以在项目中愉快地使用 ElementUI 组件了。

2. 使用选项卡组件进行布局

选项卡组件是 ElementUI 中的一个常用组件。我们可以使用它来实现选项卡功能。

下面是一个基本的选项卡组件的使用方式：

<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
      <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
      <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Tab 1',
    }
  }
}
</script>

在这个示例中，我们在 el-tabs 组件中使用了三个 el-tab-pane 组件。每个 el-tab-pane 组件代表一个选项卡，其中的 label 属性代表选项卡的标题，组件内的内容为选项卡的内容。

3. 实现动态添加选项卡的功能

上述示例中的选项卡是静态的，即选项卡的数量是固定的。接下来我们将实现一种可以通过按钮动态添加选项卡的功能。

<template>
  <div>
    <el-button @click="addTab">Add Tab</el-button>
    <el-tabs v-model="activeTab">
      <el-tab-pane v-for="(tab, index) in tabs" :key="tab.name" :label="tab.name">{{tab.content}}</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Tab 1',
      tabs: [
        { name: 'Tab 1', content: 'Content of Tab Pane 1' },
        { name: 'Tab 2', content: 'Content of Tab Pane 2' },
        { name: 'Tab 3', content: 'Content of Tab Pane 3' },
      ],
    }
  },
  methods: {
    addTab() {
      const newTabName = `Tab ${this.tabs.length + 1}`
      const newTabContent = `Content of Tab Pane ${this.tabs.length + 1}`
      this.tabs.push({ name: newTabName, content: newTabContent })
      this.activeTab = newTabName
    }
  }
}
</script>

在这个示例中，我们在 el-tabs 和 el-button 组件中定义了两个方法。其中 addTab 方法用于添加选项卡，每次添加时会在选项卡数组中推入一个新的选项卡数据，然后通过设置 activeTab 来保持它可以正常显示。

这样我们在点击按钮后就可以看到动态添加的选项卡了。