解决sortablejs+el-table表格内限制回撤和拖拽回撤失败问题

应用场景：

table内同一类型可拖拽，不支持不同类型拖拽（主演可拖拽交换位置，非主演和主演不可交换位置）,类型不同拖拽效果需还原，试了好几次el-table数据更新了，但是表格样式和数据不能及时保持一致，查阅了各位coder的经验，经过综合，实现了效果...

   <el-table
                v-if="moviePersonList"
                ref="tableStar"
                :data="moviePersonList"
                drag="true"
                stripe
                border
                class="table-bottom-bg tableStar"
                max-height="500"
            >
                <el-table-column
                    align="center"
                    prop="orderNum"
                    width="50px"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="personNameCN"
                    label="中文名"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="personNameEN"
                    label="外文名"
                ></el-table-column>
                <el-table-column
                    prop="chief"
                    label="主演"
                ></el-table-column>
                <el-table-column
                    prop="avatar"
                    label="角色头像"
                ></el-table-column>
                <el-table-column
                    prop="descriptionCn"
                    label="中文"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="descriptionEn"
                    label="英文"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="person"
                    label="人物"
                >
                </el-table-column>
                <el-table-column label="操作" width="400px;">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-edit"
                            plain
                            >编辑</el-button
                        >
                        <el-button
                            type="warning"
                            size="mini"
                            icon="el-icon-s-custom"
                            :disabled="!editable"
                            v-show="
                                item.graphyId === 1 &&
                                scope.row.chie === '否'
                            "
                            >设为主演</el-button
                        >
                        <el-button
                            size="mini"
                            icon="el-icon-error"
                            :disabled="!editable"
                            v-show="
                                item.graphyId === 1 &&
                                scope.row.chie === '是'
                            "
                            >设为非主演</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

方法部分

    rowDrop() {
        let tbody = undefined  //此处兼容火狐浏览器拖动打开新页面问题
        tbody = this.$refs.tableStar[0].$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]
        const _this = this
        let moviePersonList = _this.moviePersonList.length > 0 ? _this.moviePersonList : []
   
        Sortable.create(tbody, {
            draggable: '.el-table__row',
            forceFallback: false, 
            onEnd(evt) {
            const newIndex = evt.newIndex
            const oldIndex = evt.oldIndex
            const tab = JSON.parse(JSON.stringify(moviePersonList))
                if (tab[oldIndex].chie !== tab[newIndex].chie) {
                    // 复原拖拽之前的 数据
                    const item = tab.splice(newIndex, 1)[0];
                    tab.splice(oldIndex, 0, item);
                    // 复原拖拽之前的 dom
                    const tagName = evt.item.tagName;
                    const items = evt.from.getElementsByTagName(tagName);
                    if (evt.oldIndex > evt.newIndex) {
                    evt.from.insertBefore(evt.item, items[evt.oldIndex+1]);
                    } else {
                    evt.from.insertBefore(evt.item, items[evt.oldIndex]);
                    }
                    _this.$message.error('主演与非主演不支持位置交换')
                    return false
                }
                const ele = tab[oldIndex];
                tab.splice(oldIndex, 1)
                tab.splice(newIndex, 0, ele);
                moviePersonList = tab  // 此处必须赋值一次
                let list = []
                if(tab[newIndex].chief === '是'){
                    tab.map (item => {
                        if(item.chief === '是'){
                            list.push(item.id)
                        }
                    })
                }else{
                    tab.map (item => {
                        if(item.chief !== '是'){
                            list.push(item.id)
                        }
                    })
                }
               //  提交数据
                _this.comitHandle(list)
           }
        })
    },