element ui中el-row的gutter属性失效的问题

问题描述

在使用element ui中的el-row的gutter属性时，组件无法实现间隔，在设置了gutter属性后，依然维持原样，而控制台不报错

如图

对应的错误代码

<template>
  <div>
    <h3>layout组件的使用h3>
    
    <el-row :gutter="20">
      <el-col :span="6" class="col">占用6份el-col>
      <el-col :span="6" class="col">占用6份el-col>
      <el-col :span="6" class="col">占用6份el-col>
      <el-col :span="6" class="col">占用6份el-col>
    el-row>
    <el-row :gutter="50">
      <el-col :span="4" class="col">占用4份el-col>
      <el-col :span="8" class="col">占用8份el-col>
      <el-col :span="3" class="col">占用3份el-col>
      <el-col :span="9" class="col">占用9份el-col>
    el-row>
  div>
template>

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

<style scoped>
  .col{
    border: 1px solid red;
  }
style>

问题解决

需要在子组件中添加div标签能实现正常间隔

<template>
  <div>
    <h3>layout组件的使用h3>
    
    <el-row :gutter="20">
      <el-col :span="6"><div class="col">占用6份div>el-col>
      <el-col :span="6"><div class="col">占用6份div>el-col>
      <el-col :span="6"><div class="col">占用6份div>el-col>
      <el-col :span="6"><div class="col">占用6份div>el-col>
    el-row>
    <el-row :gutter="50">
      <el-col :span="4"><div class="col">占用4份div>el-col>
      <el-col :span="8"><div class="col">占用8份div>el-col>
      <el-col :span="3"><div class="col">占用3份div>el-col>
      <el-col :span="9"><div class="col">占用9份div>el-col>
    el-row>
  div>
template>

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

<style scoped>
  .col{
    border: 1px solid red;
  }
style>