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

最新推荐文章于 2025-06-06 23:18:27 发布

原创最新推荐文章于 2025-06-06 23:18:27 发布 · 5.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #typescript #vue.js

Vue 专栏收录该内容

2 篇文章

订阅专栏

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

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

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

使用场景

在使用Select组件时，通常使用确定的下拉框选项，供用户选择。

但有时需要根据用户的输入，获取与输入内容相关的选项，通常是根据输入内容搜索相关内容的接口，返回相关选项。
Vben提供了专门为远程搜索使用的组件：ApiSelect。官网给出的是表单中的使用示例。

表单中远程搜索

使用插槽完成组件的注入，直接上代码（只展示使用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方法获取插槽值：

getFormSlotKeys方法：

可以看到getFormSlotKeys方法使用form-开头的插槽值来区分是否是formConfig的插槽。
完结！