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

最新推荐文章于 2025-06-24 15:27:30 发布

叶卡捷琳堡

最新推荐文章于 2025-06-24 15:27:30 发布

阅读量1.6w

点赞数 10

CC 4.0 BY-SA版权

文章标签： css html vue elementui class

本文链接：https://blog.csdn.net/weixin_46841376/article/details/118863406

本文介绍了解决ElementUI中el-row组件gutter属性不起作用的问题。通过在子组件内添加div标签，成功实现了元素间的正常间隔。

文章目录

- 问题描述
- 问题解决

问题描述

在使用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>

在这里插入图片描述