将表单1作为表单2的模块：表单融合技巧

本文将介绍如何将两个表单融合在一起，将表单1作为表单2的一个模块，在表单2中增加一个表单项用于展示表单1。

**表单1：**

<div class="eidtFormContainer">
    <table class="table-form six-column white" style="width:100%;" ctltype="rx-six-table" id="hjvygmy607867" borders="yesborder" data-sort="sortDisabled" column="six" tabname="">
        <colgroup>
            <col width="11%"/>
            <col width="22.3%"/>
            <col width="11%"/>
            <col width="22.3%"/>
            <col width="11%"/>
            <col width="22.3%"/>
        </colgroup>
        <caption>
            离职交接单
        </caption>
        <tbody>
            <tr class="firstRow">
                <td style="word-break: break-all;">
                    姓名<br/>
                </td>
                <td></td>
                <td style="word-break: break-all;">
                    工号
                </td>
                <td></td>
                <td style="word-break: break-all;">
                    职务
                </td>
                <td></td>
            </tr>
            <tr>
                <td style="word-break: break-all;">
                    部门
                </td>
                <td></td>
                <td style="word-break: break-all;">
                    入职日期
                </td>
                <td></td>
                <td style="word-break: break-all;">
                    离职日期
                </td>
                <td></td>
            </tr>
            <tr>
                <td style="word-break: break-all;">
                    离职原因<br/>
                </td>
                <td style="word-break: break-all;" rowspan="1" colspan="3">
                    <rx-radio class="rx-radio    " type="main" ctltype="rx-radio" id="ueoidpk770717" :readonly="readonly" :permission="getPermission('main', 'lzyy')" v-model="data.lzyy" :valid="validFunc('main', 'lzyy', item)" :data="data" style="width:100%" mode="default" valmode="single" defaultval="" tabname="离职原因" verifyhide="lzyy" agreement="{}" :onlyvalue="false"></rx-radio>
                </td>
                <td style="word-break: break-all;">
                    办离者
                </td>
                <td></td>
            </tr>
            <tr>
                <td style="word-break: break-all;">
                    电话<br/>
                </td>
                <td></td>
                <td style="word-break: break-all;">
                    身份号码
                </td>
                <td></td>
                <td style="word-break: break-all;">
                    联系地址
                </td>
                <td></td>
            </tr>
        </tbody>
    </table><br/><br/>
</div>

**表单2：**

<template>
    <div slot="center">
        <a-form-model ref="form" :model="mdl" :rules="rules" >
            <a-form-model-item style="display: none">
                <a-input v-model="mdl.id"/>
            </a-form-model-item>

            <!-- 新增的表单项用于展示表单1 -->
            <a-form-model-item>
                <div class="eidtFormContainer">
                    <table class="table-form six-column white" style="width:100%;" ctltype="rx-six-table" id="hjvygmy607867" borders="yesborder" data-sort="sortDisabled" column="six" tabname="">
                        <colgroup>
                            <col width="11%"/>
                            <col width="22.3%"/>
                            <col width="11%"/>
                            <col width="22.3%"/>
                            <col width="11%"/>
                            <col width="22.3%"/>
                        </colgroup>
                        <caption>
                            离职交接单
                        </caption>
                        <tbody>
                            <tr class="firstRow">
                                <td style="word-break: break-all;">
                                    姓名<br/>
                                </td>
                                <td></td>
                                <td style="word-break: break-all;">
                                    工号
                                </td>
                                <td></td>
                                <td style="word-break: break-all;">
                                    职务
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="word-break: break-all;">
                                    部门
                                </td>
                                <td></td>
                                <td style="word-break: break-all;">
                                    入职日期
                                </td>
                                <td></td>
                                <td style="word-break: break-all;">
                                    离职日期
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="word-break: break-all;">
                                    离职原因<br/>
                                </td>
                                <td style="word-break: break-all;" rowspan="1" colspan="3">
                                    <rx-radio class="rx-radio    " type="main" ctltype="rx-radio" id="ueoidpk770717" :readonly="readonly" :permission="getPermission('main', 'lzyy')" v-model="data.lzyy" :valid="validFunc('main', 'lzyy', item)" :data="data" style="width:100%" mode="default" valmode="single" defaultval="" tabname="离职原因" verifyhide="lzyy" agreement="{}" :onlyvalue="false"></rx-radio>
                                </td>
                                <td style="word-break: break-all;">
                                    办离者
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="word-break: break-all;">
                                    电话<br/>
                                </td>
                                <td></td>
                                <td style="word-break: break-all;">
                                    身份号码
                                </td>
                                <td></td>
                                <td style="word-break: break-all;">
                                    联系地址
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table><br/><br/>
                </div>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

**实现方法：**

将表单1的内容复制到表单2的模板中。
在表单2中增加一个新的表单项，用于展示表单1的内容。

通过这种方式，将表单1作为表单2的一个模块，并在表单2中展示表单1的内容，可以提升用户体验，使表单更加灵活和易于使用。