Vue2.* Element Tabs 动态加载组件详析与实战
版权申诉
5星 · 超过95%的资源 185 浏览量
更新于2024-09-11
收藏 60KB PDF 举报 "本文档详细介绍了在Vue 2.x版本中利用Element UI库实现动态加载`el-tabs`组件中的`tab-pane`的步骤和方法。主要关注如何通过`v-for`指令结合`<component>`标签来动态加载不同的子组件。作者首先强调了在`<el-tab-pane>`标签中使用`<component:is=item.content></component>`的重要性，这个结构用来根据`item.content`的值动态渲染不同的子组件。
操作的核心步骤包括：
1. 定义一个名为`editableTabs`的数组，用于存储每个`tab-pane`的配置对象，包括标题（`title`）、名称（`name`）以及要加载的子组件内容（`content`）。
2. 使用`v-for`循环遍历`editableTabs`数组，为每个元素创建一个`<el-tab-pane>`，`:label`属性显示标题，`:key`用于唯一标识，`:name`设置为子组件名称，`<component:is=item.content></component>`使得内容根据`item.content`中的实际模块路径来动态加载。
此外，还提供了一个`addTab`方法，用于添加新的`tab-pane`到数组中，并控制是否显示基本信息面板。通过调用`this.$router.push`可以实现路由跳转，但在这个例子中并未展示。
完整的代码展示了如何在Vue组件中构建可动态切换的`el-tabs`组件，并且可以根据需要加载不同的`tab-pane`内容。这对于在Vue项目中处理复杂UI结构，尤其是当需要根据数据动态加载不同视图时非常有用，提高了代码的灵活性和复用性。
通过学习这篇文章，开发者可以掌握如何在Vue 2.*的Element UI框架下高效地管理动态加载的tab选项卡，为项目的可维护性和用户体验提升提供有力支持。"
vue2.* element tabs tab-pane 动态加载组件操作动态加载组件操作
主要介绍了vue2.* element tabs tab-pane 动态加载组件操作，具有很好的参考价值，希望对大家有所帮助。一
起跟随小编过来看看吧
一、重要部分一、重要部分
1、 注意 <component :is=item.content></component> ：表明模板
<el-tab-pane
v-for="(item) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
<component :is=item.content></component>
</el-tab-pane>
2、content: 'Jbxx' ，其中 jbxx 是 模板
addTab (targetName, route) {
let newTabName = ++this.tabIndex + ''
this.editableTabs.push({
title: targetName,
name: newTabName,
content: 'Jbxx'
})
this.editableTabsValue = newTabName
if (targetName === '基本信息') {
this.show = true
} else {
this.show = false
}
// this.$router.push({
// path: route
// })
}
二、完整代码二、完整代码
<template>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane
v-for="(item) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
<component :is=item.content></component>
</el-tab-pane>
</el-tabs>
</template>
<script>
import VueEvent from '../model/VueEvent.js'
import Jbxx from './jgxx/Jbxx'
export default {
data () {
return {
show: false,
editableTabsValue: '2',
editableTabs: [{
title: 'Tab 1',
name: '1',
content: ''
}, {
title: 'Tab 2',
name: '2',
content: ''
}],
tabIndex: 2
}
},
methods: {
addTab (targetName, route) {
let newTabName = ++this.tabIndex + ''
this.editableTabs.push({
下载后可阅读完整内容，剩余3页未读，立即下载
2021-01-19 上传
2021-01-21 上传
2020-10-15 上传
点击了解资源详情
2020-10-15 上传
2020-11-20 上传
点击了解资源详情
2023-05-26 上传
