正在阅读：
VUE3&Jeecg框架开发笔记-表单（BasicForm）篇
jeecg的BasicForm组件以Ant Design Vue基础，进行了高度封装，因此在使用时，一方面要看文档的使用方法，第二，自己在代码的细节上需要稍微注意
jeecg最新框架前端以vue3为基本架构，同之前VUE2有了一些变化
如页面上的各种配置信息，都统一放在了****.data.ts 文件中。
jeecg提供一套低代码生成工具，如下
在代码生成时，会有两种模式，一种是封装模式，这种模式优点是生成完成，基本不需要做什么修改，即可使用，缺点就是过渡封装，要做一些自定义的开发，会有些麻烦。
因此，jeecg还提供了一个原生a-form模式，这个模式相对一些自定义开发比较容易些。以上文档中都有相关说明。
针对BasicForm的自定义开发，做一些实践：
1.1 数据字典下拉事件
使用代码生成器，生成的文件如下（前端），list为列表主页面，data为一些参数配置文件，api为接口文件，components中的是表单文件。
如果使用BasicForm模式，那么在modal文件中，所引用的直接是【BasicForm】，需要做一些简单修改，直接可以在data中进行修改
<template> <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit"> <BasicForm @register="registerForm" /> </BasicModal> </template>
如果需要做一些稍复杂的操作动作，如，自动生成的带有一个数据字典组件，实现change事件，这里就要用到插槽 ，官方文档中也有，这里这做一些细节描述
1）使用插槽，首先在data文件中，找到表单配置项，在相关需要修改的配置项上，增加配置：
{
label: '保养项目',
field: 'maintainId',
component: 'Input',
slot: 'maintain',
dynamicRules: ({ model, schema }) => {
return [
{ required: true, message: '请输入保养项目!' },
];
},
},增加： slot: 'maintain', maintain 即插槽名称，根据文档，是直接在 BasicForm下增加 插槽模版：
但是，如果只是根据文档，一开始接触的话，会直接修改以上生成文件中的 from文件，但是，其实修改这个文件是无效的，真正修改的是model，如下：
这样，对表单就可以进行自定义功能配置了，这里另外增加了一个change事件，通过触发下拉是，完成事件执行，这里执行的如进行自定义接口请求，获取数据。
function handleChange(value) {
const arr = { maintianId: value }
defHttp.post({
url: "/baseinfo/maEquipmentMaintain/selectMaintainByid",
params: arr,
},).then(res => {
// console.log(res)
// 赋值
setFieldsValue({
maintainCycle: res.maintainCycle, // 维护周期
maintainContent: res.maintainContent // 维护内容
})
})
}同时，请求数据后，使用 setFieldsValue 进行给表单赋值：
该日志由 bemender 于 2024年07月25日 发表
转载请注明文本地址：https://www.bemhome.com/post/200.html