Search组件TreeSelect控件配置optionApi显示“无数据”

[hzzdong]

FormSchema[]配置：
[{
field: 'bookTypeId',
label: t('book.bookTypeId'),
component: 'TreeSelect',
componentProps: {
nodeKey: 'id',
props: {
label: 'name'
}
},
optionApi: async () => {
const res = await getTreeListApi({} as IListRequest)
return res.data
}
},...]
Search组件TreeSelect控件配置optionApi显示“无数据”。
但是Form组件同样配置，TreeSelect控件配置optionApi缺可以正常下拉选择数据。

[hzzdong]

发现问题是在Search组件中不会自动调用optionApi得到的结果赋值给componentProps!.data。

[bobohuochai]

遇到同样的问题，可以在父组件里操作Search 组件的schema，临时解决下。

这里奇怪的地方是，在Form 组件里更改了自己的Schema 数组深层属性，这个做法在vue 里其实是不推荐的。
不知道为什么Form 可以生效，而在Search 里不生效，Search 其实也是更改Form 的属性。

[hzzdong]

遇到同样的问题，可以在父组件里操作Search 组件的schema，临时解决下。

这里奇怪的地方是，在Form 组件里更改了自己的Schema 数组深层属性，这个做法在vue 里其实是不推荐的。 不知道为什么Form 可以生效，而在Search 里不生效，Search 其实也是更改Form 的属性。

看了下源码，Form在渲染formItem的时候调用了：
// 渲染formItem
const renderFormItem = (item: FormSchema) => {
// 如果有optionApi，优先使用optionApi
if (item.optionApi) {
// 内部自动调用接口，不影响其它渲染
getOptions(item.optionApi, item)
}
..........
}

const getOptions = async (fn: Function, item: FormSchema) => {
const options = await fn()
setSchema([
{
field: item.field,
path:
item.component === ComponentNameEnum.TREE_SELECT
? 'componentProps.data'
: 'componentProps.options',
value: options
}
])
}
而Search组件找不到类似功能的代码。

[bobohuochai]

遇到同样的问题，可以在父组件里操作Search 组件的schema，临时解决下。

这里奇怪的地方是，在Form 组件里更改了自己的Schema 数组深层属性，这个做法在vue 里其实是不推荐的。 不知道为什么Form 可以生效，而在Search 里不生效，Search 其实也是更改Form 的属性。

看了下源码，Form在渲染formItem的时候调用了： // 渲染formItem const renderFormItem = (item: FormSchema) => { // 如果有optionApi，优先使用optionApi if (item.optionApi) { // 内部自动调用接口，不影响其它渲染 getOptions(item.optionApi, item) } .......... }

const getOptions = async (fn: Function, item: FormSchema) => { const options = await fn() setSchema([ { field: item.field, path: item.component === ComponentNameEnum.TREE_SELECT ? 'componentProps.data' : 'componentProps.options', value: options } ]) } 而Search组件找不到类似功能的代码。

Search 也是用了Form

[hzzdong]

遇到同样的问题，可以在父组件里操作Search 组件的schema，临时解决下。

这里奇怪的地方是，在Form 组件里更改了自己的Schema 数组深层属性，这个做法在vue 里其实是不推荐的。 不知道为什么Form 可以生效，而在Search 里不生效，Search 其实也是更改Form 的属性。

看了下源码，Form在渲染formItem的时候调用了： // 渲染formItem const renderFormItem = (item: FormSchema) => { // 如果有optionApi，优先使用optionApi if (item.optionApi) { // 内部自动调用接口，不影响其它渲染 getOptions(item.optionApi, item) } .......... }
const getOptions = async (fn: Function, item: FormSchema) => { const options = await fn() setSchema([ { field: item.field, path: item.component === ComponentNameEnum.TREE_SELECT ? 'componentProps.data' : 'componentProps.options', value: options } ]) } 而Search组件找不到类似功能的代码。

Search 也是用了Form

对啊。奇怪。

[whosphp]

我也遇到了同样的问题

checkboxGroup 这个如果使用了 optionApi 懒加载数据, 传入 Search 组件就会渲染不出来 option,
但是如果传入 Form 组件就是正常的.

const formSchema = reactive<FormSchema[]>([
  {
    label: 'aaa',
    field: 'aaa',
    component: 'CheckboxGroup',
    optionApi: async () => {
      return [
        {
          label: 'a',
          value: 'a'
        },
        {
          label: 'b',
          value: 'b'
        }
      ]
    }
  }
])

<Search :schema="formSchema" />