下拉框（类型为：select）收款定制开发获取后台数据

使用ApiSelect收款定制开发会导致数据不能及时更新，收款定制开发需要刷新整个页面才能收款定制开发获取新的数据。

一、 收款定制开发表单中更新下拉框数据

1. 查看官网
   这里我们使用的在from表单里面更新下拉框
   

从这里可以看出可以使用updateSchema来给select赋值

2. 代码实现(部分主要)

//前端代码export const formSchema: FormSchema[] = [    {    label: '敏感词分类',    field: 'sensitiveType',    required: true,    component: 'Select',  },];//获取接口数据并放在下拉框里（这里是打开了一个弹框）//初始化表单 const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({    labelWidth: 100,    schemas: formSchema,    showActionButtonGroup: false,  });//初始化弹框  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {  //从后端接口获取值（后端返回数据必须是{label：'',value:''}形式）    stype.value = await getSensitiveType();  //将数据放到下拉框上    updateSchema({      field: 'sensitiveType',      componentProps: {        options: unref(stype),      },    });    resetFields();    setModalProps({ confirmLoading: false });    isUpdate.value = !!data?.isUpdate;    if (unref(isUpdate)) {      setFieldsValue({        ...data.record,      });    }  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3. 效果图
   

二、 表格中更新下拉框数据

1. 查看官网
   这里我们使用的在table里面更新下拉框（table中的搜索区域更新数据）
   
   官网提供的方法如下图
   
2. 代码实现

// 初始化表格  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, getForm }] = useTable({    title: '敏感词列表',    api: getSensitiveListByPage,    columns,    formConfig: {      labelWidth: 120,      schemas: searchFormSchema,    },    useSearchForm: true,    showTableSetting: true,    bordered: true,    showIndexColumn: false,    actionColumn: {      width: 80,      title: '操作',      dataIndex: 'action',      slots: { customRender: 'action' },      fixed: undefined,    },    rowSelection: {      type: 'checkbox',    },  });//注册一个回调函数，在组件挂载完成后执行。 /*     组件在以下情况下被视为已挂载：      其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。      其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。      这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户		    端执行。*/  onMounted(async () => {  //将数据放入下拉框中    const { updateSchema } = getForm();    const sOption = await getSensitiveType();    await updateSchema({      field: 'sensitiveType',      componentProps: {        options: unref(sOption),      },    });  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

3. 效果图
   

三、 下拉框带搜索（单选）

参照 Ant Design Vue官网-Select 选择器:Select props 中的showSearch属性
单选下拉框带搜索功能，这里没有采用插槽。

1.类型为ApiSelect

前端.ts中的部分代码
注意：componentProps里的labelField和valueField必须有相同的部分，否则搜索不到数据；搜索是按照value或者valueField来搜索的。若是后台返回的数据不能直接使用可以选择Select下拉框。

 {    field: 'productSeries',    component: 'ApiSelect',    label: '产品系列',    required: true,    componentProps: {      showSearch: true,      api: getProductTypeSelectList,      labelField: 'value',      valueField: 'code',    },  },
1
2
3
4
5
6
7
8
9
10
11
12

效果如下：

2.类型为Select

前端代码如下

前端.ts代码

{    field: 'customerId',    component: 'Select',    label: '客户姓名',    colProps: {      span: 12,    },  },
1
2
3
4
5
6
7
8

前端.vue(这里不懂·的看看前面)

  onMounted(async () => {        const v = await getCustomerList();        const optionCustomer = v.map((i) => {          return {            label: i.plmCustomerName,            value: i.plmCustomerName + '-' + i.plmCustomerId,          };        });        console.log('数据', optionCustomer);        updateSchema(          {            field: 'customerId',            componentProps: () => {              return {                showSearch: true,                options: unref(optionCustomer),              };            },          });      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果如下：

希望各位大佬多多指正!!!