onQuery

v0.9之后不再推荐使用onQuery

v0.9.0之后使用 queryConfig代替

queryConfig好处

• 接口配置化
• 无需开发代码
• 可决定选项字段在ui中对应的属性
• 支持所有组件（包括用户新增的自定义组件）

表单数据可以通过 drip-form formData prop 传递初始值，也可以通过配置unitedSchema的default关键字传递兜底值，但是当我们的表单数据需要从后端接口异步拉取时，我们如何配置呐？

目前 drip-form 的 select 、 treeselect 和 cascader 组件支持异步获取数据。如果其他表单控件需要支持异步获取数据，请升级 drip form 到 v0.9.0，并使用 queryConfig 代替。

代码沙盒

代码示例

App.tsx

import DripForm from '@jdfed/drip-form';
import antd from '@jdfed/drip-form-theme-antd';
import unitedSchema from './unitedSchema';
import '@jdfed/drip-form/dist/index.css';
import '@jdfed/drip-form-theme-antd/dist/index.css';
import 'antd/dist/antd.css';

// 异步数据查询
const onQuery: any = {
  select: () => {
    console.log('select选择器异步查询数据');
    return [
      {
        label: '选项1',
        value: 'choice1',
      },
      {
        label: '选项2',
        value: 'choice2',
      },
      {
        label: '选项3',
        value: 'choice3',
      },
    ];
  },
  treeselect: async ({ isFirstLoad, pId }: any) => {
    console.log('treeselect异步查询数据');
    const random = Math.random();
    // 第一次加载获取第一层级数据
    if (isFirstLoad) {
      return [
        {
          id: random,
          title: 'Node1',
          isLeaf: false,
          value: random,
        },
      ];
    }
    // 点击箭头，异步获取级联数据并返回
    return [
      {
        id: random,
        pId,
        title: 'expand',
        isLeaf: false,
        value: random,
      },
    ];
  },
};

function App() {
  return (
    <DripForm
      // 表单配置文件
      unitedSchema={unitedSchema}
      // 导入组件
      uiComponents={{ antd }}
      onQuery={onQuery}
    ></DripForm>
  );
}

export default App;

unitedSchema.ts

unitedSchema.json 并没有详细配置 selct 和 treeselect 的数据。selct 和 treeselect 的数据都是通过接口异步获取得到

接口缓存

requestCache：当该字段为true时，代表获取到的数据会缓存下来。避免每次都调用接口。如果需要每次都实时调用接口，改为 false 就可以

// 表单配置文件

export default {
  showError: 'change',
  type: 'object',
  theme: 'antd',
  schema: [
    {
      title: '选择器',
      type: ['string', 'number', 'array'],
      errMsg: {
        _: '必填',
      },
      ui: {
        type: 'select',
        placeholder: '请选择',
        allowClear: true,
        multiple: true,
        style: {
          width: '100%',
        },
        requestCache: true,
      },
      requiredMsg: '必填',
      fieldKey: 'select',
    },
    {
      title: '树形选择(异步加载数据)',
      type: 'array',
      default: [],
      fieldKey: 'treeselect',
      errMsg: {
        _: '必填',
      },
      ui: {
        minItems: 1,
        maxItems: 2,
        type: 'treeSelect',
        placeholder: '请选择',
        requestCache: true,
        treeDataSimpleMode: true,
        multiple: true,
        showCheckedStrategy: 'parent',
        allowClear: true,
        treeCheckable: true,
        style: {
          width: '50%',
        },
      },
      requiredMsg: '必填',
    },
  ],
};

代码沙盒：

预览

从上面 gif 可以看出

• 当点击选择器时，会调用接口。并缓存接口数据

• 当点击树形选择每个节点时都会调用接口获取数据。