解决element-ui库的el-row的gutter=10间距失效问题

更新时间：2024年08月16日 09:07:15 作者：半张一块，

这篇文章主要介绍了解决element-ui库的el-row的gutter=10间距失效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

el-row的gutter失效问题

完整代码在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>

总结

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

您可能感兴趣的文章:

vue-quill-editor的使用及个性化定制操作
这篇文章主要介绍了vue-quill-editor的使用及个性化定制操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
详解基于vue-router的动态权限控制实现方案
本篇文章主要介绍了详解基于vue-router的动态权限实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue项目之ES6装饰器在项目实战中的应用
作为一个曾经的Java coder,当第一次看到js里面的装饰器Decorator,就马上想到了Java中的注解,当然在实际原理和功能上面,Java的注解和js的装饰器还是有很大差别的,这篇文章主要给大家介绍了关于Vue项目之ES6装饰器在项目实战中应用的相关资料,需要的朋友可以参考下
2022-06-06
Vue中的默认插槽详解
在 Vue 中,插槽（Slot）是一种非常强大且灵活的机制,用于在组件中插入内容,默认插槽是在父组件中传递内容给子组件时使用的一种方式,这篇文章主要介绍了Vue中的默认插槽详解,需要的朋友可以参考下
2024-01-01
基于Vue3+TypeScript的全局对象的注入和使用详解
这篇文章主要介绍了基于Vue3+TypeScript的全局对象的注入和使用,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用，需要的朋友可以参考下
2022-09-09
vue3+vite+tdesign实现日历式可编辑的排课班表填写功能
本文介绍了如何使用Vue3和tdesign实现一个日历式、可编辑的排班填写功能,开发过程中面临了年份和月份下拉框的实现、周期显示以及可编辑日历的样式和数据获取等挑战,感兴趣的朋友一起看看吧
2025-01-01
解决vue单页使用keep-alive页面返回不刷新的问题
下面小编就为大家分享一篇解决vue单页使用keep-alive页面返回不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue之数据代理详解
这篇文章主要为大家介绍了vue之数据代理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
Vue生命周期介绍和钩子函数详解
这篇文章主要给大家介绍了关于Vue生命周期介绍和钩子函数的相关资料，对大家学习或者使用vue2具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧
2021-10-10
如何使用Vue进行文件预览与打印功能
这篇文章主要给大家介绍了关于如何使用Vue进行文件预览与打印功能的相关资料,这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,需要的朋友可以参考下
2023-10-10