Vue 局部布局 Layout 内部布局 [el-row]、[el-col]

在Vue中，使用Element UI库时，<el-row>和<el-col>组件用于创建局部布局。<el-row>是行容器，而<el-col>是列容器，它们通常用于网格系统的布局设计。

以下是一个简单的例子，展示如何使用这两个组件：

<template>
  <el-row>
    <el-col :span="12"><div class="grid-content bg-color-light">1/2</div></el-col>
    <el-col :span="12"><div class="grid-content bg-color-dark">1/2</div></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content bg-color-light">1/3</div></el-col>
    <el-col :span="8"><div class="grid-content bg-color-dark">1/3</div></el-col>
    <el-col :span="8"><div class="grid-content bg-color-light">1/3</div></el-col>
  </el-row>
</template>
 
<script>
export default {
  // 组件逻辑
};
</script>
 
<style>
.bg-color-light {
  background-color: #f9fafc;
}
.bg-color-dark {
  background-color: #ecf0f1;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
  line-height: 36px;
  color: white;
}
</style>

在这个例子中，我们定义了两行布局，第一行分为两个等宽的列，第二行分为三个等宽的列。每个<el-col>通过:span属性设置其占行的宽度比例，例如<el-col :span="12">表示该列占行宽度的一半。CSS样式用于显示目的，为<el-col>内的内容提供了背景色和边框。