vben admin 下拉框(类型为:select)获取后台数据

3,189 阅读1分钟

下拉框(类型为:select)获取后台数据

使用ApiSelect会导致数据不能及时更新,需要刷新整个页面才能获取新的数据。

一、 表单中更新下拉框数据

  1. 查看官网 这里我们使用的在from表单里面更新下拉框 在这里插入图片描述

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

  1. 代码实现(部分主要)
//前端代码
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. 效果图 在这里插入图片描述

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

  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',
    },
  });
//在组件被挂载之后调用(vue3)
  onMounted(async () => {
  //将数据放入下拉框中
    const { updateSchema } = getForm();
    const sOption = await getSensitiveType();
    await updateSchema({
      field: 'sensitiveType',
      componentProps: {
        options: unref(sOption),
      },
    });
  });
  1. 效果图 在这里插入图片描述

希望各位大佬多多指正,欢迎来看更多文章