{"id":17354126,"url":"https://github.com/mizuka-wu/el-table-draggable","last_synced_at":"2025-04-07T08:19:12.359Z","repository":{"id":44894283,"uuid":"386004242","full_name":"mizuka-wu/el-table-draggable","owner":"mizuka-wu","description":"让element-ui的table可拖动排序,支持 行，列，跨表格等特性","archived":false,"fork":false,"pushed_at":"2024-04-11T13:28:43.000Z","size":2553,"stargazers_count":134,"open_issues_count":13,"forks_count":24,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T05:07:24.614Z","etag":null,"topics":["column","drag","drag-and-drop","draggable","element-ui","element-ui-table","row","sortablejs","vue"],"latest_commit_sha":null,"homepage":"http://mizuka-wu.github.io/el-table-draggable/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mizuka-wu.png","metadata":{"files":{"readme":"README-ZH.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-14T16:24:53.000Z","updated_at":"2025-03-17T08:55:15.000Z","dependencies_parsed_at":"2024-04-11T14:50:06.604Z","dependency_job_id":null,"html_url":"https://github.com/mizuka-wu/el-table-draggable","commit_stats":{"total_commits":95,"total_committers":2,"mean_commits":47.5,"dds":0.3157894736842105,"last_synced_commit":"89c91fd1d52f109d4c210394c3e9108a56b1a7a7"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizuka-wu%2Fel-table-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizuka-wu%2Fel-table-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizuka-wu%2Fel-table-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizuka-wu%2Fel-table-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mizuka-wu","download_url":"https://codeload.github.com/mizuka-wu/el-table-draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247615385,"owners_count":20967184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["column","drag","drag-and-drop","draggable","element-ui","element-ui-table","row","sortablejs","vue"],"created_at":"2024-10-15T17:19:07.958Z","updated_at":"2025-04-07T08:19:12.319Z","avatar_url":"https://github.com/mizuka-wu.png","language":"JavaScript","funding_links":["https://buymeacoffee.com/mizukawu"],"categories":[],"sub_categories":[],"readme":"# el-table-draggable\n\n让`vue-draggable`支持`element-ui`中的`el-table`\n\n[demo 请查看](https://www.mizuka.top/el-table-draggable/)\n\n有问题请提交issue！我不是义务解答员\n\n欢迎提mr改进\n\n## 已知问题\n\n建议使用树状表格拖拽的人不要使用本插件\n\n1. 树状表格向下拖拽/跨越层级拖拽时候move/end的显示结果不一致\n2. 树状表格无法判断是拖入子级/同级\n\n## 特性\n\n- 支持几乎所有`sortablejs`的配置\n- 支持多个表格之间互相拖动\n- 代码提示\n- 针对空行进行了处理，可以直接拖动到空的 el-table 内，无论你有没有显示空行的提示行，默认高度为 60px，可以靠`.el-table-draggable__empty-table {min-height: px;}`来自定义\n\n### 目前支持的特性\n\n- 行拖拽\n- 列拖拽（\u003e1.1.0）\n- 设置 handle\n- 设置 group 实现分类拖拽\n- 树状表格拖拽 （\u003e1.2.0）\n- onMove 支持 （\u003e1.3.0）\n- ...其他 sortable.js 的配置\n- input 事件，因为 change 事件和 sortable.js 的默认事件重复，改为 input 事件，回调为变化后的行(列)集合\n\n## 安装\n\n### 使用 npm 或者 yarn\n\n```bash\nyarn add el-table-draggable\n\nnpm i -S el-table-draggable\n```\n\n## 使用\n\n```js\nimport ElTableDraggable from \"el-table-draggable\";\n\nexport default {\n  components: {\n    ElTableDraggable,\n  },\n};\n```\n\n### template\n\n```html\n\u003ctemplate\u003e\n  \u003cel-table-draggable\u003e\n    \u003cel-table row-key\u003e\u003c/el-table\u003e\n  \u003c/el-table-draggable\u003e\n\u003c/template\u003e\n```\n\n### props\n\n#### tag\n\n包裹的组件，默认为 div\n\n#### column\n\n启用列拖拽（试验性功能）0.6 增加\n\n#### onMove\n\n支持`onMove`回调\n\n```javascript\nonMove: function (/**Event*/evt, /**Event*/originalEvent, domInfo) {\n   // Example: https://jsbin.com/nawahef/edit?js,output\n   evt.dragged; // dragged HTMLElement\n   evt.draggedRect; // DOMRect {left, top, right, bottom}\n   evt.related; // HTMLElement on which have guided\n   evt.relatedRect; // DOMRect\n   evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default\n   originalEvent.clientY; // mouse position\n   \n   domInfo.dragged // 拖拽的行的基本信息，包含其所属data，dataindex，parent是哪个domInfo\n   domInfo.related // 根据算法算出来的对应dom，树状表格下可能和屏幕上显示的dom不一致\n   \n   // return false; — for cancel\n   // return -1; — insert before target\n   // return 1; — insert after target\n},\n```\n\n#### 其他\n\n差不多支持所有[sortablejs 的 option](https://github.com/SortableJS/Sortable#options)\n\n### 事件\n\n#### input\n\n内部 table 的数据有因为拖动造成的顺序，增减时进行通知\n\n0.5 增加\n\n回调为当前所有行数据\n\n0.6 新增\n\n列模式下，如果有`value`,返回`value`,\b 否则返回当前列属性列表（property）\n\n#### 其他\n\n差不多支持所有[sortablejs 的 option](https://github.com/SortableJS/Sortable#options)里面那些`on`开头的事件，绑定事件的时候请去掉`on` 例如`onSort =\u003e @sort`\n\n## todo\n\n- [ ] 改进树状表格拖拽\n\n## 捐赠\n\n[请我喝咖啡](https://buymeacoffee.com/mizukawu)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizuka-wu%2Fel-table-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmizuka-wu%2Fel-table-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizuka-wu%2Fel-table-draggable/lists"}