如何在Magento2后台表单中为Department字段添加动态行？

Hey there! To add a button that lets you add multiple Department rows to your Magento admin form, you'll need to replace your single dept input field with Magento's Dynamic Rows UI component. This is the standard way to handle repeatable field groups in Magento's admin UI. Let's break down the steps to make this work:

1. 修改UI组件配置（替换单个字段为Dynamic Rows） #

打开你的UI组件XML文件，把原来的单个<field name="dept">...</field>块替换成下面的dynamicRows组件，这样就能添加"Add Department"按钮，支持新增/删除多条部门输入项：

<dynamicRows name="departments">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="addButtonLabel" translate="true" xsi:type="string">Add Department</item>
            <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dynamic-rows</item>
            <item name="template" xsi:type="string">ui/dynamic-rows/templates/default</item>
            <item name="recordTemplate" xsi:type="string">ui/dynamic-rows/cells/text</item>
            <item name="dataScope" xsi:type="string">departments</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="deleteProperty" xsi:type="string">is_delete</item>
        </item>
    </argument>
    <container name="record">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/record</item>
                <item name="isTemplate" xsi:type="boolean">true</item>
                <item name="is_collection" xsi:type="boolean">true</item>
            </item>
        </argument>
        <field name="dept">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" translate="true" xsi:type="string">Department</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">departments</item>
                    <item name="dataScope" xsi:type="string">dept</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                </item>
            </argument>
        </field>
        <actionDelete>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/action-delete</item>
                    <item name="fit" xsi:type="boolean">false</item>
                    <item name="template" xsi:type="string">ui/dynamic-rows/cells/action-delete</item>
                </item>
            </argument>
        </actionDelete>
    </container>
</dynamicRows>

关键配置说明： #

• addButtonLabel: 就是你需要的"Add Department"按钮文字
• dataScope: 定义表单数据中存储多条部门值的数组键名
• actionDelete: 为每一行添加删除按钮，方便移除不需要的条目
• deleteProperty: 标记待删除的行（不会立即删除，由后端处理）

2. 后端数据适配（DataProvider和保存逻辑） #

现在表单提交的是部门数组而非单个字符串，需要调整后端代码来处理数据的读取和保存。

2.1 更新DataProvider加载现有数据 #

在Chanz\User\Model\User\DataProvider类中，修改getData()方法，把旧的单个dept值转换成Dynamic Rows需要的数组格式：

public function getData()
{
    $data = parent::getData();
    
    if (!empty($data)) {
        foreach ($data as &$item) {
            // 将旧的单个部门值转换为动态行需要的数组格式
            if (!empty($item['dept']) && !is_array($item['dept'])) {
                $item['departments'] = [['dept' => $item['dept']]];
                unset($item['dept']);
            }
        }
    }
    
    return $data;
}

2.2 调整保存逻辑处理数组 #

在你的保存控制器或模型的save方法中，处理departments数组并存储到数据库。比如如果是用逗号分隔的字符串存储部门：

// 在保存动作或模型的save方法中
$departments = $this->getRequest()->getParam('departments', []);

// 过滤掉标记为删除的行
$filteredDepartments = array_filter($departments, function ($row) {
    return empty($row['is_delete']);
});

// 提取仅部门值
$deptValues = array_column($filteredDepartments, 'dept');

// 拼接成逗号分隔的字符串（根据你的数据库结构调整）
$deptString = implode(',', array_filter($deptValues));

// 赋值给模型
$model->setData('dept', $deptString);

如果是用关联表存储多部门（扩展性更好），则需要将每个条目单独保存到关联表中。

3. 可选：调整样式（按需） #

默认情况下，"Add Department"按钮会显示在字段组上方。如果你想让它像截图一样放在最后一行下方，可以给后台主题添加自定义CSS：

.admin__dynamic-rows-add {
    margin-top: 10px;
    margin-left: 15px; /* 与输入框对齐 */
}

完成这些修改后，清理Magento缓存（bin/magento cache:clean），重新加载后台表单，就能看到"Add Department"按钮，支持新增/删除多条部门行啦。

内容的提问来源于stack exchange，提问作者chanz