Element-ui Layout布局(Row和Col组件)的实现

Element-ui是一款基于Vue的组件库，它提供了Layout布局组件，可以快速实现页面布局。Layout组件分为Row和Col两个组件，其中Row组件用于包裹Col组件，实现网页的横向排列。

1. 先引入Element-ui

要使用Element-ui的布局组件，首先需要在Vue项目中引入Element-ui。可以通过以下命令安装：

npm i element-ui -S

然后在项目入口文件(main.js)中引入Element-ui：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 使用Row和Col组件

在Vue的模板中，使用Row和Col组件来实现布局。使用前需要引入：

<template>
  <div>
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple {
  background: #99a9bf;
}

.bg-purple-light {
  background: #d3dce6;
}
</style>

这是一个简单的布局示例。在el-row中使用了两个el-col组件，其中:span="12"定义了每个col占12个网格。

3. 嵌套布局

Row和Col组件可以嵌套使用，来实现复杂的布局效果。例如，可以实现两栏、三栏、嵌套等布局。

3.1 两栏布局

<template>
  <div>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="18"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple {
  background: #99a9bf;
}

.bg-purple-light {
  background: #d3dce6;
}
</style>

3.2 三栏布局

<template>
  <div>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="16"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple {
  background: #99a9bf;
}

.bg-purple-light {
  background: #d3dce6;
}
</style>

3.3 嵌套布局

<template>
  <div>
    <el-row>
      <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6">
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="24"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple {
  background: #99a9bf;
}

.bg-purple-light {
  background: #d3dce6;
}
</style>

以上就是Element-ui Layout布局(Row和Col组件)的实现，通过适当嵌套和设置span参数，可以实现丰富多样的布局效果。