element-ui tabs无限加载

<div style="margin-bottom: 20px;">
      <el-button size="small" @click="addTab()">
        add tab
      </el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" closable  @tab-remove="removeTab">
      <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.title" :name="item.name"></el-tab-pane>
    </el-tabs>
    <component :is="componentName" :ref="item.name" :componentData="item.componentData"></component>
<script>
import home from './home'
import onepage from './onepage'

export default {
	components: {
		home,
		onepage 
	},
	data() {
		return {
			tabs: [
				{
					label: 'tab1',
					name: 'home'
				}
			],
			activeName: 'home',
			componentName: 'home',
			tabIndex: 0
		}
	},
	methods: {
		// 切换tab时
		handleClick(tab, event) {
			if (tab.name.indexOf('onepage') !== -1) {
				this.componentName = tab.name
			} else {
				this.componentName = 'home'
			}
		},
		// 添加tab
		addTab() {
			let newTabName = ++this.tabIndex
			this.editableTabs.push({
          		title: newTabName  + 'New Tab',
          		name: newTabName + 'onepage',
          		// 要传递的数据
          		componentData: {}
        	})
        	this.componentName = 'onepage'
        	this.activeName = newTabName + 'onepage'
		},
		// 关闭tab
		removeTab(targetName) {
			let tabs = this.tabs
			let activeName = this.activeName
			if (activeName === targetName) {
				tabs.forEach((tab, index) => {
					if (tab.name === targetName) {
						let nextTab = tabs[index + 1] || tabs[index - 1]
						if(nextTab) {
							activeName = nextTab.name
						}
					}
				})
			}
			this.activeName = activeName
			if (tab.name.indexOf('onepage') !== -1) {
				this.componentName = tab.name
			} else {
				this.componentName = 'home'
			}
			this.tabs = tabs.filter(tab => tab.name !== targetName)
		}
	}
}
</script>

最后

以上就是明亮网络为你收集整理的element-ui tabs无限加载的全部内容，希望文章能够帮你解决element-ui tabs无限加载所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。