vue二次封装el-table实现拖拽功能

目前el-table未提供可拖拽进行排序的功能，因之前客户需求所以自己封装了一个实现可拖拽的表格组件，以下是实现代码：

1.HTML部分

<template>
    <div>
        <el-table
            :data="data"
            border
            stripe
            row-key="id"
            style="width: 100%"
        >
            <template v-if="drag">
                <slot name="tableColumn"></slot>
                <el-table-column
                    show-overflow-tooltip
                    v-for="(item, index) in tableCol"
                    :key="index"
                    :class="'table-colunm' + index"
                    :prop="tableCol[index].prop"
                    :label="item.label"
                >
                    <template #[item.prop]="{ row }">
                        <slot :name="row.prop" :col="row">{
   {
    row }}</slot>
                    </template>
                </el-table-column>
            </template>
            <template v-else>
                <slot name="tableColumn"></slot>
                <el-table-column
                    show-overflow-tooltip
                    v-for="(item, index) in tableCol"
                    :key="index"
                    :class="'table-colunm' + index"
                    :prop="item.prop"
                    :label="item.label"
                >
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

2.JS部分
需要安装**sortablejs**！！

npm install sortablejs --save

vue2实现方法

<script>
import Sortable from 'sortablejs'
export default {
   
    data() {
   
        return {
   
            data: [
                {
   
                    id: 0,
                    name: "亲亲",
                    age: 10,
                    hobby: