FAQ

1. select 原件怎么支持异步加载 options

TIP

其他原件类似：tree-select, multi-select, cascader, cascader-lazy

方式 1：直接传入一个异步函数

查看代码

tsx

import { defineFatForm } from '@wakeadmin/components';
import { ref } from 'vue';

export default defineFatForm(({ item, group }) => {
  const callTime = ref(0);

  const getList = () => {
    callTime.value++;

    return Promise.resolve([
      {
        label: '选项1',
        value: 1,
      },
      {
        label: '选项2',
        value: 2,
      },
    ]);
  };

  return () => ({
    children: [
      item({
        prop: 'option1',
        label: '选项1',
        valueType: 'select',
        initialValue: 1,
        valueProps: {
          options: getList,
        },
      }),
      item({
        prop: 'option2',
        label: '选项1',
        valueType: 'select',
        initialValue: 2,
        valueProps: {
          options: getList,
        },
      }),
      group({
        label: '调用次数',
        children: [<span>{callTime.value}</span>],
      }),
    ],
  });
});

要点：

异步函数只会在原件挂载(setup)时执行一次。后续原件重新渲染不会被执行
重复的异步函数会被自动合并。所以可以放心地在表格(FatTable)等场景使用它。

方式 2：手动维护

可以自己手动请求数据，并通过 ref 保存起来。这种方式适用于需要手动控制请求时机、刷新时机的场景。

示例：配合 swrv 使用：

查看代码

tsx

import { defineFatForm } from '@wakeadmin/components';
import { ref } from 'vue';
import useSwrv from 'swrv';
import { ElButton } from 'element-plus';

export default defineFatForm(({ item, group }) => {
  const callTime = ref(0);
  let uuid = 0;
  const { data, mutate: reload } = useSwrv('/your/api', () => {
    callTime.value++;
    return Promise.resolve([
      {
        label: `选项1 ${uuid++}`,
        value: 1,
      },
      {
        label: `选项2 ${uuid++}`,
        value: 2,
      },
    ]);
  });

  return () => ({
    children: [
      item({
        prop: 'option1',
        label: '选项1',
        valueType: 'select',
        initialValue: 1,
        valueProps: {
          options: data.value,
        },
      }),
      item({
        prop: 'option2',
        label: '选项1',
        valueType: 'select',
        initialValue: 2,
        valueProps: {
          options: data.value,
        },
      }),
      group({
        label: '刷新',
        children: [<ElButton onClick={() => reload()}>reload: {callTime.value}</ElButton>],
      }),
    ],
  });
});

FAQ #

1. select 原件怎么支持异步加载 options #

FAQ

1. select 原件怎么支持异步加载 options