sortablejs 瞎写写

<template>
  <el-table
    ref="elTable"
    class="tables"
    size="mini"
    :data="tableData"
    style="width: 100%"
    :row-key="tableId"
  >
    <el-table-column label="序号" width="40" align="center" type="index" key="">
      <template slot-scope="scope">
        <div type="text" class="drag_btn">
          {{ getIndex(scope.$index) }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      v-for="item in tableColConfig"
      :key="item.name"
      :prop="item.name"
      :label="item.label"
    >
      <!-- 如果存在 slotName 属性，则加入动态插槽 -->
      <template #default="scope">
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
        <template v-else>
          <span>{{ scope.row[item.name] }}</span>
        </template>
      </template>
    </el-table-column>
    <template slot="empty">
      <EmptyTable :title="emptyTitle" :custom-height="154" />
    </template>
  </el-table>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  name: 'DragTable',
  props: {
    // 实际显示的表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 配置表格的数据
    tableColConfig: {
      type: Array,
      default: () => []
    },
    // tableId
    tableId: {
      type: String,
      default: 'table1'
    },
    emptyTitle: {
      type: String,
      default: '暂无数据'
    }
  },
  data() {
    return {
      isShowIndex: true
    }
  },
  mounted() {
    // 获取el-table DOM
    const el = document.querySelector('.tables .el-table__body-wrapper tbody')
    new Sortable(el, {
      animation: 150,
      ghostClass: 'blue-background-class',
      handle: '.drag_btn', // 如果需要点击某个图标拖拽的话需要吧那个图标的class写在这里
      // 写完以上部分就已经可以实现基本的拖拽功能了，以下是拓展
      //始拖拽事件
      onEnd: function (/**Event*/ evt) {
        let newIndex = evt.newIndex // 排序后的索引位置
        let oldIndex = evt.oldIndex // 排序前的索引位置
        var itemEl = evt.item // 拖拽 HTMLElement
        evt.to // 目标表
        evt.from // 上一个列表
        evt.oldIndex // 元素在旧父级中的旧索引
        evt.newIndex // 元素在新父级中的新索引
        evt.clone // 克隆元件
        evt.pullMode // 当项目在另一个可排序表中时：`“clone”`如果克隆，`true`如果移动
        const El = document.querySelectorAll('.drag_btn')
        El[evt.oldIndex].innerHTML = evt.oldIndex + 1
        El[evt.newIndex].innerHTML = evt.newIndex + 1
      },
      //点击选中元素事件
      onChoose: function (/**Event*/ evt) {},
      //取消选中事件
      onUnchoose: function (/**Event*/ evt) {}
    })
  },
  methods: {
    getIndex(v) {
      return v + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.drag_btn:hover{
  cursor: move;
}
</style>