当前位置: 首页 > article >正文

element 的tab怎么动态根据参数值添加一个vue页面

在使用 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 方法,比如从服务器获取组件名称或根据其他条件动态决定添加的组件。


http://www.kler.cn/a/587371.html

相关文章:

  • LeetCode 解题思路 17(Hot 100)
  • Android 自定义数字键盘实现教程
  • POCO F4刷机color 15
  • WSL2 Ubuntu安装GCC不同版本
  • 剑指 Offer II 087. 复原 IP
  • 计算机:基于深度学习的Web应用安全漏洞检测与扫描
  • kong搭建一套微信小程序的公司研发环境
  • 编译OpenSSL
  • 机器学习 : 训练过程
  • 1688按图搜索商品(拍立淘)接口的参数说明【附代码实例】
  • 77.HarmonyOS NEXT ImageViewerView 组件深度剖析: Swiper容器与懒加载深度解析
  • OpenBMC:BmcWeb添加路由1 getParameterTag
  • AI 直播盈利全攻略:借助智能技术实现收入自动化增长
  • 工厂方法模式 (Factory Method Pattern)
  • /proc/sys/kernel/yama/ptrace_scope的作用
  • 使用某个软件出现白屏测试员该如何排查原因?
  • 自动化测试-网页聊天室
  • Project回调函数qsort②进阶应用
  • 深度学习基础:线性代数本质6——逆矩阵、列空间与零向量
  • 滑动窗口[判断子集是否满足条件] 力扣:209 ▎2962 ▎3306