Closed zqxxjs closed 1 month ago
我稍稍修改了一ApiSelect组件,开启了多选和搜索功能,但是有个难题,比如我用搜索接口搜到的选项,保存后再次打开模态框回显表单的时候如何传递参数?因为ApiSelect 它接收一个api函数参数,默认加载前十条,但搜索的选项不在前十条,回显的时候就只显示value,如图: { field: 'receiver.userList', label: '接收人', //required: true, component: 'ApiSelect', componentProps: { api: getSysUserList, labelField: 'username', valueField: 'id', resultField: 'data', mode: 'multiple', }, }, ApiSelect 代码如下(改的可能不太好,勿怪,如有建议,虚心接收): ` <Select :show-search="true" v-bind="$attrs" @change="handleChange" @search="handleSearch" :options="getOptions" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" v-model:value="state" :mode="mode"
{ field: 'receiver.userList', label: '接收人', //required: true, component: 'ApiSelect', componentProps: { api: getSysUserList, labelField: 'username', valueField: 'id', resultField: 'data', mode: 'multiple', }, },
<template #[item]="data" v-for="item in Object.keys($slots)"> <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默认加载的前几条数据中
<template #[item]="data" v-for="item in Object.keys($slots)">
<template #suffixIcon v-if="loading">
<template #notFoundContent v-if="loading">
{{ t('component.form.apiSelectNotFound') }}
想知道如何在ApiSelect 加载回显数据的时候可以正确显示那些搜索到的选项。
步骤没啥,就是参照示例代码写的 model.data.ts Index.vue Modal.vue 然后就发现ApiSelect 无法正确回显搜索项的数据,即搜索项不在api默认加载的前几条数据中
多选内容不在已加载的options中时就不会被正确渲染。这种情况可以使用tagRender插槽来处理。 https://www.antdv.com/components/select-cn#components-select-demo-option-label-prop
非常感谢!
Documentation is
Explain in Detail
我稍稍修改了一ApiSelect组件,开启了多选和搜索功能,但是有个难题,比如我用搜索接口搜到的选项,保存后再次打开模态框回显表单的时候如何传递参数?因为ApiSelect 它接收一个api函数参数,默认加载前十条,但搜索的选项不在前十条,回显的时候就只显示value,如图:
{ field: 'receiver.userList', label: '接收人', //required: true, component: 'ApiSelect', componentProps: { api: getSysUserList, labelField: 'username', valueField: 'id', resultField: 'data', mode: 'multiple', }, },
ApiSelect 代码如下(改的可能不太好,勿怪,如有建议,虚心接收): ` <Select :show-search="true" v-bind="$attrs" @change="handleChange" @search="handleSearch" :options="getOptions" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" v-model:value="state" :mode="mode"