cl-upsert

新增、编辑组件,基于 cl-form,参数、方法皆可用

useUpsert

cl-upsert 标签绑定 ref 值后使用 useUpsert 加载组件

  • const 定义必须与 ref 一致
const Upsert = useUpsert(Options);

Options

参数说明类型可选值默认值
items表单项array
props表单配置
op操作按钮配置object
dialog对话框配置object
sync是否同步打开booleantrue / falsefalse
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);
	}
});
  • 如果希望在编辑时,处理传入的参数或者处理请求后的数据,则配合使用 nextdone
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 关闭弹窗
	}
});
Last Updated: