vue3实现NDataTable纵向

在Vue3中，你可以通过使用`Element Plus`库中的`el-table`组件配合`vue-good-table`或`vuedatatable`等数据表格插件来实现类似于Nestable的N DataTable（垂直拖动排序）。以下是基本步骤：

1. 首先，在项目中安装依赖：

   npm install element-plus vue-good-table

2. 引入所需的样式和组件：

   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <script src="https://unpkg.com/vue-good-table@latest"></script>

3. 定义数据结构，通常包括列定义和行数据：

   const columns = [
     { title: '名称', prop: 'name' },
     { title: '年龄', prop: 'age' },
     // 添加其他列...
   ];

   const data = [
     { name: '用户A', age: 20 },
     { name: '用户B', age: 25 },
     // ...更多的数据项
   ];

4. 使用`vue-good-table`创建表格：

   <template>
     <div>
       <el-table :data="data" style="width: 100%">
         <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.title">
           <!-- 可能需要自定义单元格内容 -->
         </el-table-column>
       </el-table>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         columns,
         data,
       };
     },
   };
   </script>

5. 如果需要实现类似Nestable的功能，可以考虑引入第三方库如`nested-tree-component`，并结合`vue-good-table`的事件系统，监听表单变化并更新数据模型。

请注意，这只是一个基本示例，实际应用中可能还需要处理更多细节，比如状态管理、事件绑定以及用户交互等。