elementUI表格拖拽（vue项目）

dom结构

<el-table :data="fileForm.bsDeptfileFieldconfigList" id="yourId">
                        <el-table-column type="index" width="50" />
                        <el-table-column label="字段名" align="center" prop="fieldName" >
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.fieldName" placeholder="请输入文件字段名称"  />
                            </template>
                        </el-table-column>
                        <el-table-column label="字段类型" align="center" prop="fieldType" >
                            <template slot-scope="scope">
                                <el-select clearable v-model="scope.row.fieldType" class="m-2" placeholder="请选择字段类型" >
                                    <el-option v-for="item in fieldtypeList" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否必填" align="center" prop="isRequired" >
                            <template slot-scope="scope">
                                <el-select clearable v-model="scope.row.isRequired" class="m-2" placeholder="请选择是否必填" >
                                    <el-option v-for="item in requiredList" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="显示排序" align="center" prop="sort" width="250">
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.sort" controls-position="right" :min="1" :max="100"></el-input-number>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="操作" align="center" class-name="table-button" width="80">
                            <template slot-scope="scope" >
                                <el-button size="mini" icon="el-icon-delete"  type="danger" plain @click="fieldDeleteFun(scope)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

引入sortablejs

import Sortable from 'sortablejs'

实现拖拽（之所以要获取yourId，是因为我在主页面也有一个表格，而我需要给弹框里面的表格加拖拽）

 const element = document.getElementById('yourId');
                const el = element.querySelector('.el-table__body-wrapper tbody')
                Sortable.create(el, {
                    disabled: false, // 是否开启拖拽
                    ghostClass: 'sortable-ghost', //拖拽样式
                    animation: 150, // 拖拽延时，效果更好看
                    group: { // 是否开启跨表拖拽
                        pull: false,
                        put: false
                    },
                    onEnd: (event) => {
                        const { oldIndex, newIndex } = event
                        this.updateRowOrder(oldIndex, newIndex)
                    }
                })

拖拽后执行的想退应操作

updateRowOrder (oldIndex, newIndex) {
            this.fileForm.bsDeptfileFieldconfigList.splice(newIndex, 0, this.fileForm.bsDeptfileFieldconfigList.splice(oldIndex, 1)[0]);
            var newArray = this.fileForm.bsDeptfileFieldconfigList.slice(0);
            this.fileForm.bsDeptfileFieldconfigList = [];
            this.$nextTick(function () {
                this.fileForm.bsDeptfileFieldconfigList = newArray;
            });
        },