Vue.js Vue可拖动下一个自定义列

我在vue 3中使用了vue可拖动的下一个，需要对列进行排序。那很好。但是我还需要四个不在columns数组中的额外列（不应该是可拖动的）。我的拖拉：

<draggable v-model="headers" tag="tr" :item-key="key => key">
            <template #item="{ element: header }">
              <th scope="col">
                {{ header }}
              </th>
            </template>
          </draggable>

<thead>
       <tr>
         <th class="border h-9 px-2"></th>
         <th class="border h-9 px-2">#</th>
         <th class="border h-9 px-2">header 3</th>
         <th class="border h-9 px-2">header 4</th>
          <th class="border h-9 px-2" v-for="column in columns" v-bind:key="column.label">{{column.label}}</th>
       </tr>
    </thead>

{{header}}

我的问题是，我需要将额外的行放在可拖动的tr中。 不可拖动的工作示例：

<draggable v-model="headers" tag="tr" :item-key="key => key">
            <template #item="{ element: header }">
              <th scope="col">
                {{ header }}
              </th>
            </template>
          </draggable>

<thead>
       <tr>
         <th class="border h-9 px-2"></th>
         <th class="border h-9 px-2">#</th>
         <th class="border h-9 px-2">header 3</th>
         <th class="border h-9 px-2">header 4</th>
          <th class="border h-9 px-2" v-for="column in columns" v-bind:key="column.label">{{column.label}}</th>
       </tr>
    </thead>

#
标题3
标题4
{{column.label}}

有人给我一个提示，我如何才能做到这一点