当前位置：首页 > VUE

vue左右两栏实现

2026-01-22 17:14:47VUE

实现 Vue 左右两栏布局

使用 Flexbox 布局

通过 Flexbox 可以快速实现左右两栏布局。以下是一个基本示例代码：

<template>
  <div class="container">
    <div class="left-column">
      <!-- 左侧内容 -->
    </div>
    <div class="right-column">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}

.left-column {
  flex: 1;
  background-color: #f0f0f0;
}

.right-column {
  flex: 1;
  background-color: #e0e0e0;
}
</style>

使用 Grid 布局

CSS Grid 提供了更灵活的布局方式，适合复杂场景：

<template>
  <div class="grid-container">
    <div class="left">
      <!-- 左侧内容 -->
    </div>
    <div class="right">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}

.left {
  background-color: #f0f0f0;
}

.right {
  background-color: #e0e0e0;
}
</style>

固定宽度与自适应结合

如果需要左侧固定宽度，右侧自适应：

<template>
  <div class="mixed-container">
    <div class="fixed-left">
      <!-- 固定宽度左侧 -->
    </div>
    <div class="flexible-right">
      <!-- 自适应右侧 -->
    </div>
  </div>
</template>

<style scoped>
.mixed-container {
  display: flex;
  height: 100vh;
}

.fixed-left {
  width: 200px;
  background-color: #f0f0f0;
}

.flexible-right {
  flex: 1;
  background-color: #e0e0e0;
}
</style>

响应式调整

添加媒体查询实现响应式布局，在小屏幕下改为上下排列：

@media (max-width: 768px) {
  .container, .grid-container, .mixed-container {
    flex-direction: column;
  }

  .fixed-left {
    width: 100%;
    height: 100px;
  }
}

使用第三方组件库

Element UI 等框架提供了现成的布局组件：

vue左右两栏实现

<template>
  <el-container>
    <el-aside width="200px">
      <!-- 左侧内容 -->
    </el-aside>
    <el-main>
      <!-- 右侧内容 -->
    </el-main>
  </el-container>
</template>

以上方法可根据实际需求选择，Flexbox 适合简单布局，Grid 适合复杂结构，固定+自适应适合侧边栏场景，响应式设计确保多设备兼容性。

标签: vue