当前位置：首页 > 前端教程

elementui堆叠

2026-03-05 23:33:23前端教程

堆叠布局的基本概念

堆叠布局（Stack Layout）是一种将多个元素垂直或水平堆叠排列的布局方式，常用于卡片、标签页或层叠内容的展示。Element UI 提供了多种组件和样式实现堆叠效果，例如 el-card、el-tabs 或结合 CSS 自定义。

使用 `el-card` 实现垂直堆叠

通过多个 el-card 组件垂直排列，结合间距样式实现堆叠效果：

<template>
  <div class="stack-container">
    <el-card v-for="(item, index) in list" :key="index" class="stack-item">
      {{ item.content }}
    </el-card>
  </div>
</template>

<style>
.stack-container {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 控制堆叠间距 */
}
.stack-item {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>

使用 `el-tabs` 实现标签页堆叠

el-tabs 的标签页内容默认以堆叠形式切换显示：

<el-tabs type="card">
  <el-tab-pane label="标签1">内容1</el-tab-pane>
  <el-tab-pane label="标签2">内容2</el-tab-pane>
</el-tabs>

结合 CSS 实现自定义堆叠

通过绝对定位和 z-index 控制元素的层叠顺序：

<div class="custom-stack">
  <div class="item item-1">第一层</div>
  <div class="item item-2">第二层</div>
</div>

<style>
.custom-stack {
  position: relative;
  height: 200px;
}
.item {
  position: absolute;
  width: 100%;
}
.item-1 {
  z-index: 1;
  top: 0;
  background: #f0f9eb;
}
.item-2 {
  z-index: 2;
  top: 20px;
  background: #e1f3d8;
}
</style>

动态控制堆叠顺序

通过 Vue 数据绑定动态调整堆叠顺序或显隐状态：

elementui堆叠

<template>
  <div>
    <el-button @click="toggleStack">切换堆叠</el-button>
    <div v-for="(item, index) in items" :key="index" :style="{ zIndex: item.zIndex }">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Layer 1', zIndex: 1 },
        { text: 'Layer 2', zIndex: 2 }
      ]
    };
  },
  methods: {
    toggleStack() {
      this.items.reverse();
    }
  }
};
</script>