vue项目中使用elementUI的tab组件切换时动态加载自定义组件

vue 专栏收录该内容
16 篇文章 0 订阅

vue项目中使用elementUI的tab组件切换时动态加载自定义组件

<template>
    <div class="home-tabs">
        <el-tabs v-model="ActiveName" @tab-click="handleTabsChange">
            <el-tab-pane
                v-for="(item,index) in DataList"
                :key="index"
                :label="item.label"
                :name="item.name"
            >
                <component :is='item.content'></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import windows from '../windows'
import mac from '../mac'
import history from '../history'
import download from '../download'
import setting from '../setting'
export default {
  name: 'homeTabs',
  data () {
    return {
      activeName:"windows",
      DataList: [{
        label: 'windows打包',
        name: 'windows',
        content: windows
      }, {
        label: 'mac打包',
        name: 'mac',
        content: mac
      }, {
        label: '打包记录',
        name: 'history',
        content: history
      }, {
        label: '下载',
        name: 'download',
        content: download
      }, {
        label: '程序配置',
        name: 'setting',
        content: setting
      }]
    }
  },
  components: {
    windows,
    mac,
    history,
    download,
    setting
  },
  methods: {
    handleTabsChange (tab) {
      this.$store.commit('handleTabsChange', tab.name)
    }
  }
}
</script>
<style lang="less" scoped>
</style>

重点知识

<component :is='item.content'></component>
// 动态组件:component,动态组件会根据is里面的数据变化,自动的加载不同的组件

参考地址

  1. 参考地址1
  • 0
    点赞
  • 2
    评论
  • 12
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值