1.用于创建和管理基于 vxe-table 的表格组件。它返回一个数组，包含两个元素：表格组件和表格 API
2.基本用法
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
gridEvents,
});
3.参数详解
1.formOptions ------表单配置选项
formOptions 是用于表格上方的搜索表单，他的类型是VbenFormProps
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 80,
componentProps: {
allowClear: true,
},
},
schema: querySchema(), // 表单字段定义
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
};
关键属性
commonConfig: 表单通用配置，如标签宽度、组件通用属性等
schema: 表单字段定义数组，描述每个表单控件
wrapperClass: 表单布局类，使用 Tailwind CSS 类控制响应式布局
2.gridOptions - 表格配置选项
gridOptions 是 vxe-table 的核心配置，用于定义表格的各种行为和外观
const gridOptions: VxeGridProps = {
checkboxConfig: {
highlight: true, // 高亮选中行
reserve: true, // 翻页时保留选中状态
},
columns, // 列配置
height: 'auto', // 表格高度
keepSource: true, // 保持数据源
pagerConfig: {}, // 分页配置
proxyConfig: { // 代理配置（用于数据加载）
ajax: {
query: async ({ page }, formValues = {}) => {
// 数据查询逻辑
return await dataList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
isHover: true, // 鼠标悬停效果
keyField: 'id', // 主键字段
},
id: 'unique-table-id', // 表格唯一标识，用于保存列配置
};