为工具栏添加按钮

PC端

关于表单头部工具栏添加新的自定义按钮，可以使用vue的teleport组件。首先在需要添加按钮的元素上添加一个任意Id。

<template>
    <div class="page-bg-wrap">
        <a-spin :spinning="loading" tip="加载中...">
            <div class="geg-flow-page">
                <div class="top-toolbar">
                        <!-- 在a-space上添加id approveExtendButton -->
                    <a-space :size="10" wrap id="approveExtendButton" class="second-dev-space">
                        <!-- 这里是原本的按钮 省略 -->
                        
                    </a-space>
                </div>
                <div class="flow-content">
                    <FormInformation :key="randKey" ref="formInformation" :disabled="false" :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
                </div>
            </div>
            <!-- 无用代码省略 -->
        </a-spin>
    </div>
</template>

然后可以在生成的form.vue文件中或者拆分的CustomDevForm.vue文件中添加teleport组件

<template>
    <Teleport to="#approveExtendButton">
        <a-button style="margin-right: 10px" @click="reInquiry">
            重新查询
        </a-button>
        <a-button style="margin-right: 10px" @click="endInquiry">
            结束查询
        </a-button>
    </Teleport>
</template>

需要注意的是，teleport组件的to属性必须是一个存在的元素的id。不然会报错导致渲染失效。

teleport报错

如果可以判断目标元素不存在，可以用:disabled或者v-if来禁止teleport的使用以避免报错。

<template>
    <Teleport to="#approveExtendButton" :disabled="!isExist">
        <a-button style="margin-right: 10px" @click="reInquiry">
            重新查询
        </a-button>
        <a-button style="margin-right: 10px" @click="endInquiry">
            结束查询
        </a-button>
    </Teleport>
</template>

按钮默认添加位置是在原按钮之后，如果想在特殊位置添加按钮，比如原有按钮之前，可以在按钮前添加id特殊的一个元素如span，然后再用teleport组件添加相应按钮。

<template>
    <a-space :size="10" wrap id="approveExtendButton">
                    <span id="approveExtendButtonLeft"></span>
                        <!-- 原按钮位置 -->
    </a-space>
</template>

如果有特殊需求比如不使用原按钮，也是可以的。这里举例一种方法：定义一个参数控制原按钮块的显隐，新写一个按钮块区域显隐逻辑与原按钮块相反，然后定义一个函数变化这个参数，并将这个函数使用provide传递给孙子组件；在form或者CustomDevForm组件中接收控制原按钮块隐藏，然后将新的teleport组件内容传送到新按钮块中。这里仅仅说明思路仅供参考，具体实现可以根据实际需求进行调整。

移动端暂不支持添加按钮