After ant-design vue form uses v-decorator, click on the label input box to focus on the problem solution

After ant-design vue form uses v-decorator, click on the label input box to focus on the problem solution

A recent project has a requirement as shown in the figure below:

form screening is generally label + input box, this is the label is a drop-down box, must have a value, if the value is selected in the input box, the label drop-down box must pass the value,
but the company's screening form is based on ant A component encapsulated by -design vue is fine for normal use, but now there is a relatively abnormal requirement, and the encapsulated component has not done slot processing for the label

<!-- 未修改前代码-->
<a-form-item 
   class="form-item" 
   :label="item.label"
   >
   <component
     :is="'Base' + item.type"
     v-decorator="[
       `${item.key}`,
       {
         initialValue: `${item.props.defaultValue || ''}`,
         rules: item.rules || []
       }
     ]"
     v-bind="item.props" 
     @change="(evt) => watchItem(evt, item.watchMethod, item)"
     @focus="item.props.focus ? item.props.focus() : ''"
   />

 </a-form-item>

At this time, it is necessary to change the packaged components.

<!-- 修改后代码-->
<a-form-item 
  :class="{
     
     'form-item': true, [`${item.labelSolt}_style`]: item.labelSolt}"
  :colon="item.colon === false? item.colon : true"
  id="index"
  >
  <template #label>
    <span>
      <slot :name="item.labelSolt" v-if="item.labelSolt">
        {
   
   {item.label}}
      </slot>
      <span v-else>
        {
   
   {item.label}}
      </span>
    </span>
  </template>
  <component
    :is="'Base' + item.type"
    v-decorator="[
      `${item.key}`,
      {
        initialValue: `${item.props.defaultValue || ''}`,
        rules: item.rules || []
      }
    ]"
    v-bind="item.props" 
    @change="(evt) => watchItem(evt, item.watchMethod, item)"
    @focus="item.props.focus ? item.props.focus() : ''"
  />

</a-form-item>