Skip to content

[Bug Report] <Field loading /> does not initialize field.loading #4357

@hezhengxu2018

Description

@hezhengxu2018

问题描述

@formily/vue 中,Field 模型本身支持 loading 状态,也有 setLoading 方法;但在 Vue 封装里,声明式写法 <Field loading /> 不会把该值同步到 field.loading

这会导致依赖 field.loading 的组件映射失效,例如组件通过 mapProps({ loading: true }) 从字段状态读取 loading 时,UI 不会进入加载态。

最小复现

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Field, FormProvider } from '@formily/vue'
// 这里假设 MySwitch / MyMention 之类组件内部通过 mapProps({ loading: true }) 读取 field.loading
const form = createForm()
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="demo"
      loading
      :component="[MyComponent]"
    />
  </FormProvider>
</template>

实际结果

field.loading 仍然是 false,组件无法显示 loading 状态。

期望结果

应该初始化或同步到 field.loading,这样组件通过字段状态映射时可以正常拿到 loading。我觉得关键是要@formily/core在初始化时就应该映射loading属性,即使vue的封装要改也不是很干净,只能运行时去修改。

复现分析

我查看了当前源码,发现:

Form.createField(props) 会把 props 传给 new Field(...)
Field.initialize() 中会把 this.loading 直接初始化为 false
但没有看到 this.loading = this.props.loading
IFieldProps 里也没有声明 loading
Vue ReactiveField 只是把 props.fieldProps 传给 createField,没有额外把 loading 同步到 field.loading
所以目前 Field 模型支持 loading,但 Vue 封装并没有把声明式 这条链路打通。

补充

我没有在仓库公开 issues/discussions 里检索到同类问题,如果这是预期行为,也希望文档里能明确说明 loading 需要通过 field.setLoading() 或其他方式设置,而不是直接通过 <Field loading />

Metadata

Metadata

Assignees

No one assigned

    Labels

    invalidThis doesn't seem right

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions