Appearance
v-page
组件参数
- 表单json配置:
options: Record<string, FieldConfig> - 查询方法:
queryMethod: (queryData: Record<string, any>) => Promise<{data: Object[], current: number, pageSize: number, total: number}> - 新增方法:
addItemMethod: (itemData: any) => Promise<any> - 修改方法:
editItemMethod: (itemData: any) => Promise<any> - 删除方法:
deleteItemMethod: (itemData: any) => Promise<any> - 表单每页显示数量:
pageSize: number - 是否隐藏分页功能:
hiddenPagination: boolean - 表格行id:
rowKey: string - 表格是否开启行点击:
tableRowClick: boolean - 表格标题:
tableTitle: string - 表格是否显示操作列:
optionShow: boolean - 表格是否显示复选框:
tableshowSelection: boolean - 表格操作列宽度:
optionWight: number - 表格是否禁用操作列:
hiddenViewFlag: boolean - 表格是否禁用删除按钮:
hiddenDeleteBtn: boolean - 表格是否禁用编辑按钮:
hiddenEditBtn: boolean - 表格是否禁用新增按钮:
hiddenAddBtn: boolean - 表格是否禁用查看按钮:
hiddenViewFlag: boolean - 查询表单默认值:
defaultQueryData: Record<string, any> - 表单间距设置:
formGutter: number
事件
例子
@click在options 配置中可使用onClick: () => {}
- 多选选中项:
@selection-change=(selection: any[], key: any[]): void; - 分页事件:
@pagination=(params: any): void - 行点击事件:
@row-click=(row: any, column: any, event: Event): void - 双点击事件:
@row-dblclick=(row: any): void - 监听查询from值变化:
@query-change=(queryFormData: Object)
ref 方法
使用案例
vPageRef.value?.*
- 查询表单值修改:
upQueryFormData(key: string, val: Object) => void - 修改表单值修改:
upEditFormData(key: string, val: Object) => void - 查询表单全量修改:
upQueryFormDataAll(obj: Object) => void - 修改表单全量修改:
upEditFormDataAll(obj: Object) => void - 数据加载:
loadData() => void