网站界面设计欣赏wordpress 抓取

在使用 Element UI 的 Tabs 组件时，动态添加 Vue 组件或页面可以通过操作 tabs 数组来实现。假设你要根据参数值来动态添加一个 Vue 页面（这里假设是一个 Vue 组件），你可以按照以下步骤操作：

首先，确保你已经安装并引入了 Element UI。

然后，在你的 Vue 组件中，定义一个数组来存储 Tabs 的数据，每个 Tab 对象可以包含一个 name 属性和 content 属性等，content 属性可以用来存储对应的 Vue 组件。

<template>
  <div>
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane
        v-for="(tab, index) in tabs"
        :key="index"
        :label="tab.name"
        :name="tab.name"
      >
        <component :is="tab.content"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        {
          name: 'Tab 1',
          content: ComponentA
        }
      ]
    };
  },
  methods: {
    addTab(param) {
      // 假设 param 决定了要添加哪个组件
      let newComponent;
      if (param === 'a') {
        newComponent = ComponentA;
      } else if (param === 'b') {
        newComponent = ComponentB;
      }

      if (newComponent) {
        const newTab = {
          name: `Tab ${this.tabs.length + 1}`,
          content: newComponent
        };
        this.tabs.push(newTab);
        this.activeTab = newTab.name; // 将新添加的 Tab 设置为激活状态
      }
    }
  }
};
</script>

在这个例子中，addTab 方法根据传入的 param 参数来决定添加哪个组件到 Tabs 中。你可以根据实际需要扩展 addTab 方法，比如从服务器获取组件名称或根据其他条件动态决定添加的组件。