Skip to content
On this page

row 布局组件

https://element-plus.org/zh-CN/component/layout.html

s-row 基于 el-row 封装,适合快速写栅格布局。默认插槽里的普通节点会自动包一层 el-col;如果插槽子节点已经是 el-col,组件会直接渲染,便于继续使用 Element Plus 原生能力。

Hidden Title

基础用法:<s-row :col="6" :gutter="16"></s-row>

属性事件插槽简介

基础用法

gutter 间距

gap 间距

属性

属性名说明类型默认值
col普通插槽子节点自动包裹为 el-col 时使用的 span,数组会按顺序匹配子节点number / number[]24
gap列间距别名,支持 processWidth 写法;存在时优先于 gutternumber / string''
gutter栅格间隔,数字和 px 字符串会走 Element Plus 原生 gutternumber / string0
justify主轴对齐方式,透传给 el-rowstart / end / center / space-around / space-betweenstart
align交叉轴对齐方式,透传给 el-rowtop / middle / bottomtop
colAttrs自动生成的 el-col 额外属性,适合统一传 offsetxssmmdobject{}

透传属性

属性名说明类型默认值
$attrs会透传到内部 el-row 根节点上any-

插槽

插槽名说明
default默认内容。普通节点会自动包裹 el-col;直接传入 el-col 时不再包裹

说明

  • 插槽子节点如果本身就是 el-col,组件会直接渲染,保留 spanoffset、响应式属性等原生能力。
  • 普通节点会自动包裹一层 el-col,适合快速搭布局;此时 colcolAttrs 会作用在自动生成的列上。
  • gapgutter 的布局效果一致;如果两个同时传入,组件会优先使用 gap
  • gap 支持 16'16''16px''1rem''5%'processWidth 风格写法。
  • 数字和 px 会优先走 Element Plus 原生 gutter,其他单位会退回为组件内部 CSS 变量实现。

思云博智私有前端组件库