更新记录
1.0.0(2024-12-24) 下载此版本
简单版表格,支持固定表头,可拖动表格顺序,拿来即用
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
安装sortablejs
npm i sortablejs
使用
- 引用sortablejs import Sortable from "sortablejs";
- mounted初始化 this.rowDrop();
拖拽参数说明
- filter filter: ".th-header", // 过滤器,不需要进行拖动的元素
- draggable draggable: ".drag-element",// 可拖动的元素(行)
- handle handle: ".handle",// 拖动元素(按图标拖动,不是整行)
- scroll scroll: true,//可拖动下拉滚动
- direction
direction: "vertical",//拖动方向,一般也可以自动识别
拖拽js文档
https://sortablejs.com/options
ps:如果要隐藏正在拖动元素左上角复制元素,加一句css就可以实现 .sortable-fallback { display: none !important; }