因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。

接上一节

10、新建表单，打开VForm3编辑页面

/*** 新增事件*/function handleAdd() {designer.open = true;nextTick(() => {reset();vfDesignerRef.value.clearDesigner();});}

11、编辑表单

/*** 编辑事件*/function handleEdit(record: Recordable) {designer.open = true;console.log("handleEdit record",record)nextTick(async () => {const formId = record?.id || ids.value[0];const res = await getForm(formId);console.log("handleEdit res",res)form.value = res;vfDesignerRef.value.setFormJson(form.value.formContent);})}

12、详情

/*** 详情*/function handleDetail(record: Recordable) {render.open = true;render.title = '查看表单详情';nextTick(async () => {vfRenderRef.value.setFormJson(record.formContent || {formConfig: {}, widgetList: []});});}

13、保存表单

/** 提交表单操作 */const submitForm = () => {const formJson = vfDesignerRef.value.getFormJson();form.value.formContent = JSON.stringify(formJson);console.log("submitForm form.value",form.value);nextTick(async () => {form.value.id ? await saveOrUpdate(form.value,true) : await saveOrUpdate(form.value,false);createMessage.success('操作成功！');dialog.open = false;designer.open = false;//刷新数据reload();})}

14、效果图