首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-ui中el-row中设置:gutter间隔不生效

element-ui中el-row中设置:gutter间隔不生效问题

2024-08-07 08:42:42 作者：学编程的北极熊

这篇文章主要介绍了element-ui中el-row中设置:gutter间隔不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

el-row中设置:gutter间隔不生效

问题描述

在使用element-ui时，采用布局中的el-row与el-col，

想要将el-col之间设置间隔，

在el-row中添加属性:gutter，发现并没有间隔出现

问题代码

<el-row :gutter="20">
        <el-col :span="12" style="border:1px solid #000">第一部分
        </el-col>
        <el-col :span="12" style="border:1px solid #000">第二部分
        </el-col>
</el-row>

解决方法

后面发现是因为在el-col中设置了style样式，才导致gutter的间距样式不起作用。

所以如果想设置样式的话就直接加个class形式

<el-row :gutter="20">
        <el-col :span="12" class="col_style">第一部分
        </el-col>
        <el-col :span="12" class="col_style">第二部分
        </el-col>
</el-row>

<style>
 .col_style {
 	style="border:1px solid #000"
 	}
</style>

element-ui库的el-row的gutter=10间距失效

完整代码在vue中可直接执行

若想gutter间距效果体现出来，需要将css样式，（如：border，background等），添加在el-col的子标签div中的class下才能生效

类名添加在el-col中样式是有了，但是间距确不体现

html代码

<el-row :gutter='20'>
  <el-col :span='6'><div class="gutter">132465</div></el-col>
  <el-col :span='6'><div class="gutter">132465</div></el-col>
  <el-col :span='6'><div class="gutter">132465</div></el-col>
  <el-col :span='6'><div class="gutter">132465</div></el-col>
  <el-col :span='6'><div class="gutter">132465</div></el-col>
</el-row>

css代码

.element{
  .el-row{
    padding: 20px;
    .el-col{
      margin-bottom: 10px;
      .gutter{
        border: 1px solid #ccc;
        padding: 10px 10px;
      }
    }
  }
}

完整代码

<template>
  <div class="element">
    <el-row :gutter='20'>
      <el-col :span='6'><div class="gutter">132465</div></el-col>
      <el-col :span='6'><div class="gutter">132465</div></el-col>
      <el-col :span='6'><div class="gutter">132465</div></el-col>
      <el-col :span='6'><div class="gutter">132465</div></el-col>
      <el-col :span='6'><div class="gutter">132465</div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Elememt'
};
</script>

<style lang='less' scoped>
.element{
  .el-row{
    padding: 20px;
    .el-col{
      margin-bottom: 10px;
      .gutter{
        border: 1px solid #ccc;
        padding: 10px 10px;
      }
    }
  }
}
</style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。