el-row el-col 设置一排两个 设置两排

如果你想在一行中设置两个或多个 `el-col` 元素，并且希望它们可以自动换行，可以使用 `el-row` 组件的 `:gutter` 属性，并在 `el-col` 元素外层套一个 `div` 元素来实现。例如：

<template>
  <el-row :gutter="20">
    <div v-for="i in 6" :key="i">
      <el-col :span="12">col{{i}}</el-col>
    </div>
  </el-row>
</template>

在上述示例中，我们在 `el-row` 组件内部使用了一个 `div` 元素来包裹每个 `el-col` 元素，这样可以确保它们在自动换行时不会被打断。同时，我们还设置了 `:gutter="20"`，表示每个 `el-col` 元素之间的间距为 20 像素。

如果你想在一个页面中使用多个这样的布局，可以给它们分别设置不同的 `class` 名称，然后使用 CSS 样式来控制它们的外观。例如：

<template>
  <el-row :gutter="20" class="my-row">
    <div v-for="i in 6" :key="i">
      <el-col :span="12" class="my-col">col{{i}}</el-col>
    </div>
  </el-row>
</template>

<style>
.my-row {
  margin-bottom: 20px;
}
.my-col {
  background-color: #eee;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
}
</style>

在上述示例中，我们给 `el-row` 和 `el-col` 元素分别设置了 `class` 名称，并在 CSS 样式中为它们设置了不同的外观效果。同时，我们还通过给 `my-row` 类设置 `margin-bottom: 20px` 的样式来为每个布局之间添加间隔。