cl-upsert
新增、编辑组件,基于 cl-form,参数、方法皆可用
useUpsert
cl-upsert 标签绑定 ref 值后使用 useUpsert 加载组件
- const 定义必须与 ref 一致
const Upsert = useUpsert(Options);
Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
items | 表单项 | array | ||
props | 表单配置 | |||
op | 操作按钮配置 | object | ||
dialog | 对话框配置 | object | ||
sync | 是否同步打开 | boolean | true / false | false |
onOpen | 打开时的钩子 | function(isEdit, data) | ||
onClose | 关闭时的钩子 | function(done) | ||
onInfo | 编辑获取详情时的钩子 | function(data, { next, done, close }) | ||
onSubmit | 表单提交时的钩子 | function(isEdit, data, { next, done, close }) |
示例
基础用法
提示
编辑下,会根据行的 id
调用 service.info
的接口,获取完整的数据后,再赋予表单。
- 如果不希望调用接口,则直接在
onInfo
钩子下执行done
返回传入的数据:
const Upsert = useUpsert({
onInfo(data, { done }) {
done(data);
}
});
- 如果希望在编辑时,处理传入的参数或者处理请求后的数据,则配合使用
next
和done
:
const Upsert = useUpsert({
async onInfo(data, { done, next }) {
const newData = await next({
...data,
status: false
});
if (!newData.name) {
newData.name = "未命名";
}
done(newData);
}
});
- 如果希望在提交时,处理传入的参数,使用
on-submit
钩子函数:
const Upsert = useUpsert({
async onSubmit(isEdit, data, { done, close, next }) {
next({
...data,
status: false
});
// done 关闭加载状态
// close 关闭弹窗
}
});