ma-crud formType='grid-tailwind' 多层级dataIndex时 编辑不回显-(好了, 是我ma-form/index.vue文件 不对)

[xhlsmile]

{
formType: 'grid-tailwind',
hide: true,
colNumber: 4,
cols: [
{
formList: [
{
title: '长(cm)',
dataIndex: 'dimension.package_length',
formType: 'input-number',
min: 0,
mode: 'button',
editDefaultValue: (record) => {
return 12
},
append: 'cm'
},
]
},{
formList: [
{
title: '宽(cm)',
dataIndex: 'dimension.package_width',
formType: 'input-number',
min: 0,
mode: 'button',
append: 'cm'
}
]
}, {
formList: [
{
title: '高(cm)',
dataIndex: 'dimension.package_height',
formType: 'input-number',
min: 0,
mode: 'button'
}
]
}, {
formList: [
{
title: '重量(g)',
dataIndex: 'weight',
formType: 'input-number',
min: 0,
mode: 'button',
}
]
}
]
}

[dosubot]

To address the issue of multi-level dataIndex fields not displaying their values for editing in a ma-crud component with formType='grid-tailwind', ensure your component is set up to handle nested properties correctly. The editing problem arises because Vue.js's v-model does not support paths for nested objects directly.

For fields like dimension.package_length, dimension.package_width, and dimension.package_height, you'll need to manually handle the binding of nested properties. This can be achieved by using the get and set methods from lodash to access and update nested properties. Here's how you can adjust your code for a nested property:

<a-input v-if="row.formType === 'input' && row.dataIndex.indexOf('.') !== -1" v-bind="row" :value="get(record, row.dataIndex)" @input="value => set(record, row.dataIndex, value)" />

This approach requires importing and using set along with get:

import { get, set } from 'lodash'

By implementing this method, you ensure that your form elements correctly update nested properties, allowing for the editing of multi-level dataIndex fields in your ma-crud component.

Details

Sources

• src/components/ma-crud/components/column.vue
• src/components/ma-form/containerItem/grid-tailwind.vue
• src/components/ma-form/index.vue
• src/components/ma-crud/components/form.vue
• src/components/ma-crud/index.vue
• src/components/ma-form/containerItem/children-form.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.

[xhlsmile]

@dosu.

[dosubot]

It seems there was a misunderstanding in my previous instructions. If you're encountering issues with multi-level dataIndex fields not displaying their values for editing in a ma-crud component configured with formType='grid-tailwind', the solution involves ensuring your component properly handles the binding for nested object paths.

Vue.js, by default, does not directly support v-model binding for nested properties, which is likely the cause of the issue you're facing. To work around this, you would typically need to implement a custom binding solution that can handle nested paths.

However, without direct modification capabilities or further details on how ma-crud implements its form binding, I recommend checking the documentation or source code of the ma-crud component to see if there are any built-in methods or props designed to handle nested object paths. If the component is part of a larger library or framework, there might be additional utilities or guidelines for dealing with nested data.

If the component does not support nested properties out of the box, you might need to flatten your data structure for editing purposes and then re-nest it before submission. This approach involves creating a flat structure where each key corresponds to a path (e.g., dimension.package_length) and then converting it back to a nested structure upon form submission.

For a more specific solution, consider reaching out to the maintainers of ma-crud or searching for examples in the community that deal with similar challenges.

Details

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.