vue实现sheet页
Vue 实现 Sheet 页（多标签页）
在 Vue 中实现类似 Excel 的 Sheet 页功能，可以通过动态组件或路由结合标签页组件完成。以下是两种常见实现方式：
使用动态组件切换 Sheet
通过 v-for 渲染标签页头，配合动态组件 <component :is="currentComponent"> 切换内容。
<template>
<div>
<div class="tabs">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="currentTab = tab"
:class="{ active: currentTab === tab }"
>
{{ tab.name }}
</button>
</div>
<component :is="currentTab.component" />
</div>
</template>
<script>
import Sheet1 from './Sheet1.vue';
import Sheet2 from './Sheet2.vue';
export default {
data() {
return {
currentTab: null,
tabs: [
{ name: 'Sheet1', component: Sheet1 },
{ name: 'Sheet2', component: Sheet2 }
]
};
},
created() {
this.currentTab = this.tabs[0];
}
};
</script>使用 Vue Router 管理 Sheet
通过路由参数区分不同 Sheet 页，结合 <router-view> 和导航标签实现。
<template>
<div>
<router-link
v-for="(tab, index) in tabs"
:key="index"
:to="tab.path"
class="tab-link"
>
{{ tab.name }}
</router-link>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ name: 'Sheet1', path: '/sheet/1' },
{ name: 'Sheet2', path: '/sheet/2' }
]
};
}
};
</script>路由配置示例：
const routes = [
{ path: '/sheet/1', component: Sheet1 },
{ path: '/sheet/2', component: Sheet2 }
];动态添加/删除 Sheet
通过数组操作实现动态增删标签页：
methods: {
addSheet() {
this.tabs.push({
name: `Sheet${this.tabs.length + 1}`,
component: () => import(`./Sheet${this.tabs.length + 1}.vue`)
});
},
removeSheet(index) {
this.tabs.splice(index, 1);
}
}样式优化
为标签页添加基础样式：
.tabs {
display: flex;
border-bottom: 1px solid #ddd;
}
.tab-link, .tabs button {
padding: 8px 16px;
background: #f1f1f1;
border: none;
cursor: pointer;
}
.tab-link.router-link-exact-active, .tabs button.active {
background: #fff;
border-bottom: 2px solid #42b983;
}注意事项
- 动态组件需提前注册或在
components中声明 - 路由方式需确保路由配置与组件匹配
- 复杂场景可结合 Vuex 或 Pinia 管理 Sheet 状态
- 性能敏感场景建议使用
keep-alive缓存组件
以上方法可根据实际需求选择，动态组件适合简单场景，路由方式更适合复杂应用。
