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

下拉框(类型为: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',
    },
  });
//注册一个回调函数,在组件挂载完成后执行。
 /* 
    组件在以下情况下被视为已挂载:
      其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
      其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。
      这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用,或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户		    端执行。*/
  onMounted(async () => {
  //将数据放入下拉框中
    const { updateSchema } = getForm();
    const sOption = await getSensitiveType();
    await updateSchema({
      field: 'sensitiveType',
      componentProps: {
        options: unref(sOption),
      },
    });
  });
  1. 效果图
    在这里插入图片描述

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


版权声明:本文为qq_44774287原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。