Vue 可拖动下一个自定义列

如何解决Vue 可拖动下一个自定义列

我在 vue 3 中使用 vue 可拖动 next 并且需要对列进行排序。这很好用。但我还需要另外四个不在列数组中的列（不应该是可拖动的）。我的可拖动：

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

我的问题是，我需要将附加行放在可拖动的 tr 中。 没有可拖动的工作示例：

<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>

有人提示我如何实现这一目标吗？