我是靠谱客的博主 明亮网络,这篇文章主要介绍element-ui tabs无限加载,现在分享给大家,希望可以做个参考。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<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内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(60)

评论列表共有 0 条评论

立即
投稿
返回
顶部