jeecgboot使用的问题记录

目录

1.下拉框 — 使用字典方式

2.下拉框—使用接口获取数据方式

3.表单发送之前对数据操作 

4.表单数据联动方式

5.获取表格查询条件参数,在你需要的方法中就可以拿到数据

6.弹窗下拉框和时间空间，加上下面这句就可以超出弹窗了

7.使用RangePicker时间空间，在初始化表格中的属性fieldMapToTime可设置，开始时间和结束时间字段以及格式

8.设置表格查询样式

9.表格表单自定义重置按钮操作

10.设置表单动态label内容

11.表单回显处理，无边框样式

---

最近使用jeecgboot些项目，总结使用过程中的问题。

form表单

1.下拉框 — 使用字典方式

{
    label: '工单状态',
    field: 'orderStatus',
    component: 'JDictSelectTag',
    componentProps: {
        dictCode: 'emergency_order_status',
    },
}

2.下拉框—使用接口获取数据方式

配置项

{ 
    label: '工单状态',
    field: 'orderStatus',
    component: 'Input',
    componentProps: {
        api: employeeUnit,
        fieldNames: {
            label: 'departName',
            value: 'orgCode',
        },
    },
}

 Api

export const employeeUnit = (params) => {
    return defHttp.get({ url: Api.employeeUnit, params });
};

 radios使用字典配置方式

{
   field: 'sex',
   component: 'JDictSelectTag',
   label: '性别',
   componentProps: {
      dictCode: 'sex2',
      type: 'radio',
    },
},

3.表单发送之前对数据操作 

        表格查询发送之前的方法searchInfo和beforeFetch都可以添加参数

 const { tableContext } = useListPage({
      tableProps: {
        api: queryTenantPackUserList,
        immediate: false,
        columns: tenantPackUserColumns,
        searchInfo:{},  // 额外的请求参数
        canResize: false,
        useSearchForm: false,
        beforeFetch: (params) => {
           //可以在请求之前默认添加参数
           params.tenantId = tenantPackData.tenantId;
           return params;
        },
        actionColumn: {
           width: 120,
           fixed: 'right',
        },
    },
});

4.表单数据联动方式

1. componentProps 传入回调函数配置，通过表单的事件来控制数据联动

2.formModel 表单数据

例 选择二级部门后再选择三级部门

{
    label: '二级部门',
    field: 'deptId',
    component: 'ApiSelect',
    componentProps: ({ formModel }) => {
    r