vben admin pro 框架的 ApiComponent Api组件包装器select使用示例

最近开发的项目中，有一个功能是 form 表单里 select 组件下拉选项是通过接口返回的数据，我使用了ApiComponent 组件，实现这个功能有两种方法，第一种是通过 slots 插入组件的方式实现（参考：vben admin pro 框架的BasicTable之使用slots 插入组件），第二种就是下面这个。废话不说，直接上代码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
//1.在 data.ts 中引入接口和emitter文件
import { options } from '#/api/';
import { emitter } from '../mitt';
//2.在modalSchema中使用ApiSelect组件
export const modalSchema: FormSchemaGetter = () => [
  {
    label: 'label',
    fieldName: 'Id',
    component: 'ApiSelect',
    componentProps: {
      api: options,
      resultField: 'lists', //接口返回的数据列表
      labelField: 'Name', 
      valueField: 'id',
      onChange: (val:string) => {
        emitter.emit('handleChange', val);
      }
    },
  },
]

需要注意的是，使用这个方法必须得用emitter把onChange时间传回主组件，所以还得创建一个emitter文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { mitt } from '@vben/utils';

/**
 * dictType: string
 */
type Events = {
  handleChange: string;
};

export const emitter = mitt<Events>();

4.在主组件中编写接受切换的事件

1
2
3
4
function handleChange(val: string) {
  console.log('选择的项', val);
}
emitter.on('handleChange', handleChange);

即可。