avue-crud upload拖拽排序

### avue-crud 中实现 upload 组件拖拽排序的功能 要在 `avue-crud` 的 `upload` 组件中实现拖拽排序功能，可以借助第三方库 `sortablejs` 或其 Vue 封装版本 `vuedraggable` 来完成。以下是具体实现方式： #### 依赖安装 首先需要引入必要的依赖项： ```bash npm install vuedraggable sortablejs --save ``` #### 核心逻辑说明 通过监听文件列表的变化并结合 `vuedraggable` 提供的拖拽能力，可以在前端实现文件顺序调整后的数据同步。 --- #### 示例代码 以下是一个完整的示例代码片段，展示了如何在 `avue-crud` 的 `upload` 功能中集成拖拽排序： ```html <template> <div> <!-- Avue-Crud 表格 --> <avue-crud :option="crudOption" :data="tableData"> <!-- 自定义 Upload 列 --> <template slot-scope="{ row }" slot="fileListSlotName"> <draggable v-model="row.fileList" handle=".drag-handle" @end="onDragEnd(row)"> <transition-group type="transition" name="flip-list"> <div class="item" v-for="(file, index) in row.fileList" :key="index"> <span class="drag-handle"> Drag </span> {{ file.name }} <button @click="removeFile(row, index)">Remove</button> </div> </transition-group> </draggable> </template> </avue-crud> </div> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable, }, data() { return { crudOption: { column: [ { label: 'ID', prop: 'id' }, { label: '文件列表', prop: 'fileList', slot: 'fileListSlotName' }, ], }, tableData: [ { id: 1, fileList: [{ name: 'file1.jpg' }, { name: 'file2.png' }], }, ], }; }, methods: { onDragEnd(row) { console.log('新文件顺序:', row.fileList); this.syncOrderToServer(row); // 同步到服务器 }, removeFile(row, index) { row.fileList.splice(index, 1); }, syncOrderToServer(row) { const payload = { fileIdList: row.fileList.map((file, idx) => ({ fileId: file.id || '', order: idx })), }; // 调用接口更新文件顺序 this.$axios.post('/update-file-order', payload).then(() => { console.log('文件顺序已成功保存'); }); }, }, }; </script> <style scoped> .item { display: flex; align-items: center; margin-bottom: 8px; } .drag-handle { cursor: grab; padding-right: 10px; } .flip-list-move { transition: transform 0.5s ease-in-out; } </style> ``` --- #### 关键点解析 1. **`vuedraggable` 集成** - 使用 `vuedraggable` 包裹文件列表区域，并绑定模型属性 `v-model`[^1]。 - 设置 `handle=".drag-handle"` 属性来指定可拖动的手柄部分。 2. **事件处理** - 当拖拽结束时触发 `@end` 事件，在回调函数中调用自定义方法 `onDragEnd` 更新状态或发送请求[^1]。 3. **服务端交互** - 文件顺序改变后需通知后台重新排列存储的数据结构。可以通过 POST 请求传递新的索引映射关系[^2]。 4. **样式优化** - 添加 CSS 过渡动画提升用户体验效果（如 `.flip-list-move` 类名）[^1]。 --- #### 注意事项 - 如果项目未使用 Element UI，则可能需要额外适配样式兼容性问题。 - 确保每次修改本地数组的同时也及时告知远程数据库保持一致性。