下拉框(类型为:select)获取后台数据
使用ApiSelect会导致数据不能及时更新,需要刷新整个页面才能获取新的数据。
一、 表单中更新下拉框数据
- 查看官网
这里我们使用的在from表单里面更新下拉框
从这里可以看出可以使用updateSchema来给select赋值
- 代码实现(部分主要)
//前端代码
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,
});
}
});
- 效果图
二、 表格中更新下拉框数据
- 查看官网
这里我们使用的在table里面更新下拉框(table中的搜索区域更新数据)
官网提供的方法如下图
- 代码实现
// 初始化表格
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',
},
});
//在组件被挂载之后调用(vue3)
onMounted(async () => {
//将数据放入下拉框中
const { updateSchema } = getForm();
const sOption = await getSensitiveType();
await updateSchema({
field: 'sensitiveType',
componentProps: {
options: unref(sOption),
},
});
});
- 效果图