[BUG] 使用ColumnService设置子表单无效

[nevereditcode]

执行命令并粘贴以下结果。

Command: uname -a && php -v && composer info | grep mine && php --ri swoole

# Paste the result here.

bug描述:

当表单中某个字段的值改变时，想要重置子表单，但是使用crudRef.value.getColumnService().set("items").setAttr("formList", 新子表单)这个方法无效

重现步骤:

{
    title: "类型",
    dataIndex: "type",
    formType: "select",
    dict: {
      data: terminalType,
    },
    hide: true,
    commonRules: [{ required: true, message: "类型必填" }],
    width: 180,
    onChange: (value) => {
      const columnService = crudRef.value.getColumnService();
      let list = columnService.get('items');
      api({
          type: value,
        })
        .then((res) => {
          let form = formList();
          form[2].dict.data = res.data;
          list.setAttr('formList', form)
        });
    },
  },

[boring-cyborg]

Thanks for opening your first issue here! Be sure to follow the issue template! 感谢您在这里反馈第一个问题！请务必遵循问题模板！

[dosubot]

To address the issue of resetting a subform within a Vue application, especially when dealing with dynamic forms as in MineAdmin Vue, you should focus on directly manipulating the reactive data model that backs the form. Here's a concise guide to help you achieve this:

1. Update the Reactive Data Model: Directly modify the formModel[props.component.dataIndex] to reset your subform. This could mean setting this array to an empty array for a complete reset or to its initial state with default values.

2. Leverage Vue's Reactivity: Ensure changes are reactive so the UI updates accordingly by using Vue's reactivity system. This is crucial for the addition or removal of items in your reactive data structure to be reflected in the UI.

3. Use Vue's watch for Field Changes: To reset the subform based on changes to a specific field, utilize Vue's watch or watchEffect functions. Monitor the specific field for changes and reset the subform as needed.

Here's an example snippet demonstrating this approach:

import { watch } from 'vue';

// Assuming `formModel` is your reactive form model
watch(() => formModel.someField, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    // Clear the subform or reset to default values
    formModel[props.component.dataIndex] = []; // Clears the subform
    // Or set to default values
    // formModel[props.component.dataIndex] = [{...defaultSubformItem}, {...anotherDefaultSubformItem}];
  }
}, { deep: true });

This method ensures that any changes to the formModel are done reactively, allowing Vue to update the DOM accordingly. If your form or subform requires specific initialization logic for setting default values or other setup tasks, encapsulate this logic in functions that can be called both at creation and when resetting is needed.

For more detailed examples and guidance, you might want to refer to the MineAdmin Vue repository, particularly the index.vue and children-form.vue components within the src/components/ma-form directory.

Details

Sources

• src/components/ma-form/index.vue
• src/components/ma-form/containerItem/children-form.vue
• src/components/ma-crud/components/form.vue
• api/ApiController.php
• src/components/ma-form/formItem/form-code-editor.vue
• src/components/ma-form/js/columnService.js
• src/views/system/api/index.vue
• src/components/ma-form/formItem/form-editor.vue

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[X.Mo]

肯定不支持这样动态哈

[nevereditcode]

那我有什么方法可以重置这个子表单吗，在我使用MaForm这个组件的时候

[X.Mo]

改变子表单的display 属性试试