正在阅读：

VUE3&Jeecg框架开发笔记-表单（BasicForm）篇 slot插槽 自定义组件

jeecg的BasicForm组件以Ant Design Vue基础，进行了高度封装，因此在使用时，一方面要看文档的使用方法，第二，自己在代码的细节上需要稍微注意
jeecg最新框架前端以vue3为基本架构，同之前VUE2有了一些变化
如页面上的各种配置信息，都统一放在了****.data.ts 文件中。


jeecg提供一套低代码生成工具，如下

image.png

在代码生成时，会有两种模式，一种是封装模式，这种模式优点是生成完成，基本不需要做什么修改，即可使用，缺点就是过渡封装，要做一些自定义的开发，会有些麻烦。
因此，jeecg还提供了一个原生a-form模式，这个模式相对一些自定义开发比较容易些。以上文档中都有相关说明。
针对BasicForm的自定义开发，做一些实践：
1.1 数据字典下拉事件
使用代码生成器，生成的文件如下（前端），list为列表主页面，data为一些参数配置文件，api为接口文件，components中的是表单文件。

image.pngimage.png

如果使用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下增加 插槽模版：

image.png

但是，如果只是根据文档，一开始接触的话，会直接修改以上生成文件中的 from文件，但是，其实修改这个文件是无效的，真正修改的是model，如下：

image.png

这样，对表单就可以进行自定义功能配置了，这里另外增加了一个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 进行给表单赋值：

image.png

该日志由 bemender 于 2024年07月25日 发表

转载请注明文本地址：https://www.bemhome.com/post/200.html

qrcode