解决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>

总结

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

您可能感兴趣的文章:

解决修改el-pagination显示文字的问题
这篇文章主要介绍了解决修改el-pagination显示文字的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vue组件层级关系详细分析
这篇文章主要介绍了Vue组件的层级关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Vue3 computed初始化获取设置值实现示例
这篇文章主要为大家介绍了Vue3 computed初始化以及获取值设置值实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue3使用element-plus再次封装table组件的基本步骤
这篇文章主要介绍了vue3使用element-plus再次封装table组件的基本步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue实现弹出框点击空白页弹框消失效果
这篇文章主要介绍了VUE实现弹出框点击空白页弹框消失,实现方法可以在Vue中实现弹出框然后通过点击空白页面来让弹窗隐藏,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-12-12
vue项目中路径使用@和~的区别及说明
这篇文章主要介绍了vue项目中路径使用@和~的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Vue开发之组件通信的常用方案全攻略
在 Vue 开发中,组件通信是构建复杂应用的基础,本文将对比 Vue 2 与 Vue 3,带你梳理最常用的 5 种通信方案,有需要的小伙伴可以根据需要进行选择
2026-02-02
vue输入框使用模糊搜索功能的实现代码
这篇文章主要介绍了vue输入框使用模糊搜索功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
vue父组件向子组件传递多个数据的实例
下面小编就为大家分享一篇vue父组件向子组件传递多个数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue3中集成高德地图并实现平移缩放功能
随着前端技术的不断发展,地图应用在我们的项目中越来越常见,本文将介绍如何在Vue3项目中集成高德地图,并通过简单的配置实现地图的平移和缩放功能,需要的朋友可以参考下
2024-09-09