vbenjs / vue-vben-admin

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!
https://www.vben.pro
MIT License
24.96k stars 6.78k forks source link

Docs: 请问如何更新ApiSelect 的值,在开启搜索的情况 #4302

Closed zqxxjs closed 1 month ago

zqxxjs commented 1 month ago

Documentation is

Explain in Detail

我稍稍修改了一ApiSelect组件,开启了多选和搜索功能,但是有个难题,比如我用搜索接口搜到的选项,保存后再次打开模态框回显表单的时候如何传递参数?因为ApiSelect 它接收一个api函数参数,默认加载前十条,但搜索的选项不在前十条,回显的时候就只显示value,如图: image { field: 'receiver.userList', label: '接收人', //required: true, component: 'ApiSelect', componentProps: { api: getSysUserList, labelField: 'username', valueField: 'id', resultField: 'data', mode: 'multiple', }, }, ApiSelect 代码如下(改的可能不太好,勿怪,如有建议,虚心接收): ` <template #suffixIcon v-if="loading">

<template #notFoundContent v-if="loading">

{{ t('component.form.apiSelectNotFound') }}

`

Your Suggestion for Changes

想知道如何在ApiSelect 加载回显数据的时候可以正确显示那些搜索到的选项。

Steps to reproduce

步骤没啥,就是参照示例代码写的 model.data.ts Index.vue Modal.vue 然后就发现ApiSelect 无法正确回显搜索项的数据,即搜索项不在api默认加载的前几条数据中

mynetfan commented 1 month ago

多选内容不在已加载的options中时就不会被正确渲染。这种情况可以使用tagRender插槽来处理。 https://www.antdv.com/components/select-cn#components-select-demo-option-label-prop

zqxxjs commented 1 month ago

非常感谢!