vxe-form，解决使用v-if切换form时，vxe-form-item表单绑定错误问题

前因

最近公司项目需要使用VXE进行表格和表单的代码编写，确实方便好用，
但实际使用上发现vxe有bug，要用一些匪夷所思的方法来修正，在网络上检索未发现有对应文档，
故在思否写此文章，希望碰到相同问题的朋友能够得以参考。

问题描述

上部分单选radio控制下部分的form表单显示，不一样的radio显示不一样的内容，
使用v-if来判断和进行切换不同的form表单。

rock对应的表单代码

<vxe-form :data="formData1" v-if="formKey==='rock'">
     <vxe-form-item title="昵称" field="nickname" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'vxe-icon-question-circle-fill' }">
          <template #default="{ data }">
            <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
          </template>
        </vxe-form-item>  
</vxe-form>

Shakermarker对应的表单代码

<vxe-form :data="formData2" v-if="formKey==='Shakermarker'">
    <vxe-form-item title="性别" field="sex" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'vxe-icon-user-fill' }" :title-suffix="{ message: '右边图标', icon: 'vxe-icon-warning-triangle' }">
        <template #title>
          <span style="color: red;">标题</span>
        </template>
        <template #default="{ data }">
          <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
            <vxe-option value="1" label="女"></vxe-option>
            <vxe-option value="2" label="男"></vxe-option>
          </vxe-select>
        </template>
      </vxe-form-item>
     <vxe-form-item title="昵称" field="nickname" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'vxe-icon-question-circle-fill' }">
          <template #default="{ data }">
            <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
          </template>
        </vxe-form-item>
             
</vxe-form>

但测试发现实际上由于vxe在切换后，没有根据form的改变来重新渲染视图，导致radio切换时，下方form出现错乱，如下图：

只要来回切换radio，图标就会自己增加一个

解决方案

planA 重新渲染视图

1、在每个vxe-form-item上加上key，试图通过key的改变重新渲染视图，但由于vxe的封装，key值没有传给组件，无效。
2、在每次点击radio触发的事件中，使用forceUpdate()强制更新视图，仍无效

planB 使用空的vxe-form-item进行占位

不难看出，切换后的form表单视图没有更新，里面的input以及title的icon都仍是上一个表单对应位置的vue-form-item,所以尝试在新的表单中，对上一个表单有，但这个表单没有的地方进行占位，并使用vxe-form-item的visible属性进行隐藏，测试后发现可以正常显示。（真的很怪）


进行占位后的代码如下：
rock对应的表单代码

<vxe-form :data="formData1" v-if="formKey==='rock'">
    <vxe-form-item   :span="24" :item-render="{}"  :visible="false"/>
     <vxe-form-item title="昵称" field="nickname" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'vxe-icon-question-circle-fill' }">
          <template #default="{ data }">
            <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
          </template>
        </vxe-form-item>  
</vxe-form>

Shakermarker对应的表单代码

<vxe-form :data="formData2" v-if="formKey==='Shakermarker'">
    <vxe-form-item title="性别" field="sex" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'vxe-icon-user-fill' }" :title-suffix="{ message: '右边图标', icon: 'vxe-icon-warning-triangle' }">
        <template #title>
          <span style="color: red;">标题</span>
        </template>
        <template #default="{ data }">
          <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
            <vxe-option value="1" label="女"></vxe-option>
            <vxe-option value="2" label="男"></vxe-option>
          </vxe-select>
        </template>
      </vxe-form-item>
     <vxe-form-item title="昵称" field="nickname" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'vxe-icon-question-circle-fill' }">
          <template #default="{ data }">
            <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
          </template>
        </vxe-form-item>
             
</vxe-form>