Vue3+Element Plus 使用sortablejs对el-table表格进行拖拽

sortablejs官网：点击跳转

一、安装sortablejs

npm install sortablejs --save

二、 页面按需引入

import Sortable from 'sortablejs';

三、组件方法

1.temlate:

<template>
<el-table ref="tableHeader" :data="tableData" row-key="id" style="width: 100%">
                  <el-table-column label="章节名称" prop="date" width="328">
                    <template #default="scope">
                      <el-input v-model="scope.row.date"/>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="试题数量" prop="name" width="100"/>
                  <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                    <template #default="scope">
                      <el-button circle icon="Delete" type="danger"></el-button>
                      <el-tooltip
                          class="box-item"
                          content="按住鼠标调整到合适的位置后释放"
                          effect="dark"
                          placement="top"
                      >
                        <el-button circle icon="Rank"></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
</template>

2.script

import Sortable from 'sortablejs';

onMounted(() => {
  rowDrag() // 初始化行拖拽事件
})
const tableHeader = ref(null)
const rowDrag = () => {
  let el = tableHeader.value.$el.querySelector('.el-table__body-wrapper tbody')
  Sortable.create(el, {
    animation: 180,
    delay: 0,
    onEnd(evt) {
      const oldItem = tableData.value[evt.oldIndex]
      tableData.value.splice(evt.oldIndex, 1);
      tableData.value.splice(evt.newIndex, 0, oldItem);
    }
  })
}

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id: 1
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id: 2
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id: 3
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id: 4
  },
])