- 效果圖如下：
image.png
1. 安裝Sortable.js插件
使用 npm install sortable.js --save 或者 yarn add sortable.js
2. 引入sortable.js
import Sortable from 'sortablejs'
3. 項目中使用sortable.js
image.png
<template #icon>
<el-icon class="move-icon cursor-pointer" style="font-size: 20px; cursor: pointer; margin-top: 5px"><Rank /></el-icon>
</template>
image.png
- 主要代碼：
const initSortable = () => {
const el1 = tableEl1.value.$el.querySelector('.el-table__body tbody')
Sortable.create(el1, {
handle: '.move-icon',
onEnd: ({ newIndex, oldIndex }) => {
const arr = state.sewList
const currRow = arr.splice(oldIndex, 1)[0]
arr.splice(newIndex, 0, currRow)
state.sewList = []
nextTick(() => {
state.sewList = arr
})
}
})
}
image.png
-
掛載之后調(diào)用上圖方法：
image.png
【參考文檔】
