vue3 + Element plus + Ts + Sorta
2023-03-13 本文已影响0人
前端新阳
- 效果图如下：
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
-
挂载之后调用上图方法：
image.png
【参考文档】
