vue-element el-table 使用sortablejs拖拽排序
阿新 • • 發佈:2022-04-11
需求描述
vue-element-admin
開發過程中需要對el-table
行進行排序(即每一行可以上下移動),然後將排序後的資料傳給後臺更新資料。該表格無分頁。
問題分析
方法一:可以採用在每條資料中加兩個上下移動的按鈕,每次移動一行。該方法實現簡單,不過要連續移動的時候需要多次呼叫介面,互動效果不太好。
方法二:可以採用table的拖拽功能實現行的一次性拖拽。該方法可以實現拖拽後呼叫介面,任意移動多行,但是需要依賴sortablejs
倉庫。
問題解決
綜合考慮決定使用sortablejs
實現該功能。
- 安裝依賴
npm install sortablejs --save # yarn add sortablejs --save # bower install --save sortablejs
- 在
*vue
檔案中引入
import Sortable from 'sortablejs'
- 使用
<template> <!-- 注意這裡的 row-key 需要設定,否則拖動排序可能顯示不正常 --> <el-table :data="tableList" row-key="id"> <el-table-column prop="..." label="..."></el-table-column> ... </el-table> </template>
mounted() { // 初始化 this.initSort() }, methods: { initSort() { const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] const sortable = new Sortable(el, { onEnd: evt => { const curRow = this.tableList.splice(evt.oldIndex, 1)[0] this.tableList.splice(evt.newIndex, 0, curRow) // this.updateSort() 更新資料庫,將排序後的資料傳給後端 } }) } }
備註
// 配置項
var sortable = new Sortable(el, {
group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
sort: true, // boolean 定義是否列表單元是否可以在列表容器內進行拖拽排序
delay: 0, // number 定義滑鼠選中列表單元可以開始拖動的延遲時間;
touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
disabled: false, // boolean 定義是否此sortable物件是否可用,為true時sortable物件不能拖放排序等功能,為false時為可以進行排序,相當於一個開關;
store: null, // @see Store
animation: 150, // ms, number 單位:ms,定義排序動畫的時間
easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
handle: ".my-handle", // 格式為簡單css選擇器的字串,使列表單元中符合選擇器的元素成為拖動的手柄,只有按住拖動手柄才能使列表單元進行拖動
filter: ".ignore-elements", // 過濾器,不需要進行拖動的元素
preventOnFilter: true, // 在觸發過濾器`filter`的時候呼叫`event.preventDefault()`
draggable: ".item", // 允許拖拽的專案類名
ghostClass: "sortable-ghost", // drop placeholder的css類名
chosenClass: "sortable-chosen", // 被選中項的css 類名
dragClass: "sortable-drag", // 正在被拖拽中的css類名
dataIdAttr: 'data-id',
swapThreshold: 1, // Threshold of the swap zone
invertSwap: false, // Will always use inverted swap zone if set to true
invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
direction: 'horizontal', // 拖拽方向 (預設情況下會自動判斷方向)
forceFallback: false, // 忽略 HTML5拖拽行為,強制回撥進行
fallbackClass: "sortable-fallback", // 當使用forceFallback的時候,被複制的dom的css類名
fallbackOnBody: false, // 將cloned DOM 元素掛到body元素上。
fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
scroll: true, // or HTMLElement
scrollFn: function (offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) {
...
}, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px
bubbleScroll: true, // apply autoscroll to all parent elements, allowing for easier movement
dragoverBubble: false,
removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it
emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it
setData: function ( /** DataTransfer */ dataTransfer, /** HTMLElement*/ dragEl) {
dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
},
// 元素被選中
onChoose: function ( /**Event*/ evt) {
evt.oldIndex; // element index within parent
},
// 元素未被選中的時候(從選中到未選中)
onUnchoose: function ( /**Event*/ evt) {
// same properties as onEnd
},
// 開始拖拽的時候
onStart: function ( /**Event*/ evt) {
evt.oldIndex; // element index within parent
},
// 結束拖拽
onEnd: function ( /**Event*/ evt) {
var itemEl = evt.item; // dragged HTMLElement
evt.to; // target list
evt.from; // previous list
evt.oldIndex; // element's old index within old parent
evt.newIndex; // element's new index within new parent
evt.clone // the clone element
evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
},
// 元素從一個列表拖拽到另一個列表
onAdd: function ( /**Event*/ evt) {
// same properties as onEnd
},
// 列表內元素順序更新的時候觸發
onUpdate: function ( /**Event*/ evt) {
// same properties as onEnd
},
// 列表的任何更改都會觸發
onSort: function ( /**Event*/ evt) {
// same properties as onEnd
},
// 元素從列表中移除進入另一個列表
onRemove: function ( /**Event*/ evt) {
// same properties as onEnd
},
// 試圖拖拽一個filtered的元素
onFilter: function ( /**Event*/ evt) {
var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
},
// 拖拽移動的時候
onMove: function ( /**Event*/ evt, /**Event*/ originalEvent) {
// Example: https://jsbin.com/nawahef/edit?js,output
evt.dragged; // dragged HTMLElement
evt.draggedRect; // DOMRect {left, top, right, bottom}
evt.related; // HTMLElement on which have guided
evt.relatedRect; // DOMRect
evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
originalEvent.clientY; // mouse position
// return false; — for cancel
// return -1; — insert before target
// return 1; — insert after target
},
// clone一個元素的時候觸發
onClone: function ( /**Event*/ evt) {
var origEl = evt.item;
var cloneEl = evt.clone;
},
// 拖拽元素改變位置的時候
onChange: function ( /**Event*/ evt) {
evt.newIndex // most likely why this event is used is to get the dragging element's current index
// same properties as onEnd
}
})