Vue -- element-ui 关于<el-row><el-col>布局

我们可以通过分块来进行布局：

例如实现以下的布局(两边可增加样式进行调整)：

 Vue 代码：

<template>
  <el-container>
  <el-header>
    header
  el-header>
  <el-main>
    <el-row>
      <el-col :span="24">   
        <el-row>
          <el-col :span="4" style="background-color: coral;">
1
          el-col>
          <el-col :span="16" style="background-color: #42b983; border: 1px solid black;">
            <el-row>
              <el-col style="background-color: red;">
1
              el-col>
            el-row>
            <el-row>
              <el-col :span="8" style="background-color: antiquewhite">
1
              el-col>
              <el-col :span="8" style="background-color: brown;">
1
              el-col>
              <el-col :span="8" style="background-color: mintcream">
1
              el-col>
            el-row>
          el-col>
          <el-col :span="4" style="background-color: #4a5cff;">
1
          el-col>

        el-row>
      el-col>
    el-row>
  el-main>
  el-container>
template>

<script>
    export default {
        name: "test1"
    }
script>

<style scoped>

style>