vue3+ts中 vuex-table 实现表单的拖拽功能

在Vue 3和TypeScript中，你可以使用vuedraggable这个库来实现表单的拖拽功能。首先，你需要安装vuedraggable：

npm install vuedraggable

然后，你可以在你的Vue组件中这样使用它：

<template>
  <div>
    <draggable v-model="formList" @start="drag=true" @end="drag=false">
      <div v-for="item in formList" :key="item.id">
        {{ item.label }}
      </div>
    </draggable>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import draggable from 'vuedraggable';
 
interface FormItem {
  id: number;
  label: string;
}
 
export default defineComponent({
  components: {
    draggable
  },
  setup() {
    const formList = ref<FormItem[]>([
      { id: 1, label: 'Field A' },
      { id: 2, label: 'Field B' },
      { id: 3, label: 'Field C' },
    ]);
 
    return {
      formList
    };
  }
});
</script>

在这个例子中，draggable组件包裹了一个循环生成的表单项，v-model绑定了一个响应式的表单项数组formList。用户可以通过拖拽来重新排列表单项。