Grid 栅格

Grid 栅格 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { Grid, GridItem } from "@/components/pro/grid";

const blocks = ["筛选", "表格", "详情"];
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <Grid :cols="{ xs: 1, sm: 2, md: 3, lg: 3, xl: 3 }" :gap="[12, 12]"><GridItem v-for="item in blocks" :key="item"><div class="demo-box">{{ item }}</div></GridItem></Grid>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { Grid, GridItem } from "@/components/pro/grid";

Props

参数	说明	类型	默认值	必填
cols	响应式布局	number | Record<BreakPoint, number>	{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }	否
collapse	是否开启折叠功能	boolean	false	否
showRow	可见的行数	number	1	否
gap	行和列间距	[number, number] | number	0	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
default	默认内容插槽。	-

Expose

名称	说明	类型
breakPoint	当前响应式断点。	-

Module API

名称	说明	类型
Grid	导出 Grid 供业务侧复用。	useInstall(index)
GridItem	导出 GridItem 供业务侧复用。	useInstall(gridItem)

Types

GridProps

导出 GridProps 供业务侧复用。

字段	说明	类型	默认值	必填
cols	响应式布局	number | Record<BreakPoint, number>	'{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }'	否
collapse	是否开启折叠功能	boolean	false	否
showRow	可见的行数	number	1	否
gap	行和列间距	[number, number] | number	0	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。