需求,vue项目,el-tabs页面首次进来到当前页面,不加载其他页面,只有点击的时候再让加载,实现示例代码
时间: 2024-03-12 09:46:52 浏览: 16
好的,针对您的需求,我可以提供以下示例代码来实现:
```vue
<template>
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="Tab 1" name="tab1">
<div v-if="activeTab === 'tab1'">
<!-- Tab 1 content -->
</div>
</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">
<div v-if="activeTab === 'tab2'">
<!-- Tab 2 content -->
</div>
</el-tab-pane>
<el-tab-pane label="Tab 3" name="tab3">
<div v-if="activeTab === 'tab3'">
<!-- Tab 3 content -->
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
loadedTabs: ['tab1'] // 存储已经加载的标签页的名称
};
},
methods: {
handleTabClick(tab) {
if (!this.loadedTabs.includes(tab.name)) {
// 如果该标签页还未加载过,则加载它
this.loadedTabs.push(tab.name);
}
this.activeTab = tab.name;
}
}
};
</script>
```
这段代码中,我们使用了 `el-tabs` 和 `el-tab-pane` 组件来实现标签页的切换。在每个标签页的内容部分,我们使用了 `v-if` 来判断当前标签页是否被选中,只有被选中时才会渲染对应的内容。
在 `el-tabs` 组件上,我们使用了 `@tab-click` 事件来监听标签页的点击事件。在事件处理函数中,我们首先判断该标签页是否已经被加载过,如果没有,则将它的名称存入 `loadedTabs` 数组中,表示该标签页已经被加载过。然后再将 `activeTab` 属性设置为该标签页的名称,让它显示出来。
这样就可以实现只有在标签页被点击时才加载对应的内容的效果了。