当前位置：首页 > VUE

vue实现sheet页

2026-01-14 04:25:46VUE

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;
}