Vben Admin ApiSelect组件搜索后台数据获取Select选项

文章介绍了Vue-Vben-Admin框架中如何在表单和表格中使用ApiSelect组件进行远程搜索,特别是在Select组件中实现根据用户输入动态获取相关选项的功能,并提供了相关代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
vben 中包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。

使用场景

在使用Select组件时,通常使用确定的下拉框选项,供用户选择。
image.png
但有时需要根据用户的输入,获取与输入内容相关的选项,通常是根据输入内容搜索相关内容的接口,返回相关选项。
Vben提供了专门为远程搜索使用的组件:ApiSelect。官网给出的是表单中的使用示例。
image.png

表单中远程搜索

使用插槽完成组件的注入,直接上代码(只展示使用ApiSelect相关的代码):

<BasicForm
  autoFocusFirstItem
  :labelWidth="200"
  :schemas="schemas"
  :actionColOptions="{ span: 24 }"
  @submit="handleSubmit"
  @reset="handleReset"
>
  <template #remoteSearch="{ model, field }">
    <ApiSelect
      :api="optionsListApi"
      showSearch
      v-model:value="model[field]"
      :filterOption="false"
      resultField="list"
      labelField="name"
      valueField="id"
      :params="searchParams"
      @search="onSearch"
    />
  </template>
</BasicForm>

import { type Recordable } from '@vben/types';
import { computed, defineComponent, unref, ref } from 'vue';
import { BasicForm, FormSchema, ApiSelect } from '/@/components/Form/index';

const keyword = ref<string>('');
const searchParams = computed<Recordable<string>>(() => {
	return { keyword: unref(keyword) };
});
function onSearch(value: string) {
  keyword.value = value;
}

// form配置
const schemas: FormSchema[] = [
    {
    field: 'field32',
    component: 'Input',
    label: '下拉远程搜索',
    helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'],
    required: true,
    slot: 'remoteSearch',
    colProps: {
      span: 8,
    },
    defaultValue: '0',
  },
]

BasicForm中使用template模块,slot值保持一致。

在表格的formConfig中使用ApiSelect远程搜索

// index.vue文件
<template>
  <BasicTable @register="registerTable">
    <template #action="{ record }">
      <TableAction
        stopButtonPropagation
        :actions="[
          {
            label: '编辑',
            onClick: () => handleNewProduct(record),
          },
        ]"
      />
    </template>
    <template #form-remoteSearch="{ model, field }">
      <ApiSelect
        :api="apiName"
        showSearch
        v-model:value="model[field]"
        :filterOption="false"
        resultField="list"
        labelField="productName"
        valueField="id"
        :params="selectSearchParams"
        @search="onSearch"
      />
    </template>
  </BasicTable>
</template>

const [registerTable, method] = useTable({
  title: '平台产品',
  api: listProductsApi,
  beforeFetch: (params) => {
    // 使用产品id时,关键词不生效
    if (params.id) {
      params.productIds = [params.id];
      params.id = undefined;
      params.keyword = undefined;
    }
    if (params) params.token = userStore.getToken;

    return params;
  },
  columns: getBasicColumns(),
  useSearchForm: true,
  formConfig: getFormConfig(),
  showTableSetting: true,
  bordered: true,
  scroll: { y: 555 },
  rowSelection: { type: 'checkbox', columnWidth: 40 },
});

// columnSetting.tsx文件
export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
    showResetButton: false,
    submitButtonOptions: { text: '搜索' },
    schemas: [
      {
        field: `id`,
        label: `产品名称`,
        component: 'Select',
        colProps: defaultColProps,
        slot: 'remoteSearch',
        show: true,
      },
      {
        field: `keyword`,
        label: `关键词`,
        component: 'Input',
        colProps: defaultColProps,
      },
    ],
  };
}

注意:表格配置的插槽值为remoteSearch,在index.vue文件中,如果把template模块放在BasicTable中,需要在插槽值前面加上"form-"。
原因是BasicTable源码中,使用getFormSlotKeys方法获取插槽值:
image.png
getFormSlotKeys方法:
image.png
可以看到getFormSlotKeys方法使用form-开头的插槽值来区分是否是formConfig的插槽。
完结!

### VBen Admin 表单组件文档教程 VBen Admin 是一个基于 Vue 3 和 TypeScript 构建的现代化后台管理系统框架,提供了丰富的组件和功能模块。其中,表单组件是一个核心部分,用于数据输入、校验以及交互处理。 #### 表单组件的核心特性 1. **动态生成表单项** 利用 `BasicForm` 或其他自定义封装的表单组件,可以轻松配置并渲染复杂的表单结构[^1]。通过传递 JSON 配置对象,能够快速创建多种类型的表单项(如输入框、下拉菜单、日期选择器等)。 2. **强大的校验机制** 基于 Ant Design Vue 的 Form 组件扩展而来,支持内置校验规则以及自定义校验逻辑。可以通过设置 `rules` 属性来指定每一项的数据验证标准[^2]。 3. **灵活的 API 设计** 提供了一系列方法用于操作表单实例,例如提交 (`submit`)、重置 (`resetFields`)、获取当前值 (`getFieldsValue`) 等。这些方法使得开发者能够在各种场景下精确控制表单行为。 4. **响应式设计与适配能力** 支持根据不同屏幕尺寸自动调整布局样式,确保在移动端设备上也能获得良好的用户体验。 #### 实现示例 以下是使用 VBen Admin 中 `BasicForm` 创建一个简单登录表单的例子: ```vue <template> <BasicForm @register="registerForm" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { BasicForm, useForm } from '/@/components/Form'; export default defineComponent({ components: { BasicForm }, setup() { const [registerForm] = useForm({ schemas: [ { field: 'username', component: 'Input', label: '用户名', required: true, colProps: { span: 24 } }, { field: 'password', component: 'Password', label: '密码', required: true, colProps: { span: 24 } } ], actionColOptions: { span: 24 }, submitButtonOptions: { text: '登录' }, resetButtonOptions: { show: false } }); return { registerForm }; } }); </script> ``` 此代码片段展示了如何注册表单及其对应的字段配置,并设置了基本的行为选项。 #### 关键点解析 - **schemas 定义**:这是描述表单项的关键属性集合,每一条记录代表了一个独立控件的信息,包括名称、类型、标签文字以及其他参数。 - **事件绑定**:通过监听 `@register` 方法完成初始化过程;同时还可以附加额外回调函数以应对特定需求。 - **APISelect 和 ApiTreeSelect 特殊处理**:如果涉及远程接口调用,则需特别注意搜索模式的选择——默认情况下会依据 value 进行匹配,但如果希望切换至 label 字段作为关键字检索目标的话,则需要参照官方指南或者社区经验加以修改[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值