useTable 配置
原创大约 3 分钟
警告
本 Hooks 是系统最重要的内容,主要封装高度复用的 表格增删改查
代码。
Hooks 的优点是可以有效的组织和封装代码,同时又不强限制使用形式。
说明
由于多选,过滤等操作需依赖表格组件提供的方法,所以目前仅支持 vxe-table。
仅封装了大部分已知的表格通用型方法。
因为众所周知过度封装后使用时的学习成本、维护成本都是很高的。
参数
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
title | string | 页面标题 | |
getList | function | 获取列表接口函数 | |
add | function | 新增接口函数 | |
del | function | 删除接口函数 | |
get | function | 获取单条详情接口函数 | |
update | function | 更新接口函数 | |
importData | function | 导入接口函数 | |
export | string | 导出地址 | |
formRef | string | formRef | 表单的 ref |
tableRef | string | tableRef | 表格的 ref |
row | object | 行数据配置 | |
data | object | 需要解构为响应式的数据 | |
cellClick | function | 正在进行中 | 当表格存在多选框时,此方法可控制点击某行时清除别的行的选中状态 |
myGetList | function | 正在进行中 | 自定义请求列表函数,不调用内置函数 |
handleReset | function | 正考虑是否废弃 | 重置表单钩子,如果需要对表单设置动态值,可在这个回调内添加 |
handleAdd | function | 正考虑是否废弃 | 新增钩子,如果需要对表单设置动态值,可在这个回调内添加 |
submitAfter | function | 正考虑是否废弃 | 提交数据前最后的处理方法,修改数据不会影响 form 原数据 |
callback | function | 回调方法 |
行数据配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
id | string | id | 数据的 id 字段 |
status | string | status | 数据的 状态 字段,变更状态时用到 |
name | string | name | 数据的 名称 字段,变更状态时用到 |
sort | string | sort | 数据的 排序 字段,新增修改时用到 |
需要解构为响应式的数据
属性 | 类型 | 说明 |
---|---|---|
form | object | 表单数据 |
appendForm | object | 提交表单时追加参数(异步参数时使用) |
rules | object | 表单校验数据 |
queryParams | object | 查询参数 |
appendQueryParams | object | 追加请求参数(异步参数时使用) |
回调方法
callback
在许多异步请求前、后,某些场景需要一些特定的数据或者页面交互。所以衍生出此回调函数。
此函数包含许多种类型回调
示例方法:callback(type, response, formData)
type
回调类型response
response || 空 || queryParamsformData
表单数据
回调说明
值 | 说明 | response | 是否有formData |
---|---|---|---|
GetListBefore | 请求列表前执行 | queryParams | 无 |
GetListAfter | 请求列表参数格式化完成,可在此回调内修改请求参数 | query | 无 |
Cancel | 取消弹窗 | 无 | 无 |
OpenUpdate | 打开修改窗口 | response | 无 |
Status | 状态修改 | response | 无 |
Update | 修改提交完成 | 无 | 无 |
Add | 新增提交完成 | response | 有 |
Delete | 删除完成 | response | 无 |
ImportBefore | 导入前 | formData对象 | 无 |
Import | 导入完成 | response | 无 |
Export | 导出完成 | response | 无 |
List | 请求列表完成 | response | 无 |