vue3 + Element plus + Ts + Sorta

• 效果图如下：

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

【参考文档】

1. https://www.bbsmax.com/A/Vx5MKlMYzN/
2. Sortable简单好用的拖拽排序工具