应用场景：
table内同一类型可拖拽，不支持不同类型拖拽（主演可拖拽交换位置，非主演和主演不可交换位置）,类型不同拖拽效果需还原，试了好几次el-table数据更新了，但是表格样式和数据不能及时保持一致，查阅了各位coder的经验，经过综合，实现了效果…
<el-tablev-if="moviePersonList"ref="tableStar":data="moviePersonList"drag="true"stripeborderclass="table-bottom-bg tableStar"max-height="500"><el-table-columnalign="center"prop="orderNum"width="50px"></el-table-column><el-table-columnalign="center"prop="personNameCN"label="中文名"></el-table-column><el-table-columnalign="center"prop="personNameEN"label="外文名"></el-table-column><el-table-columnprop="chief"label="主演"></el-table-column><el-table-columnprop="avatar"label="角色头像"></el-table-column><el-table-columnprop="descriptionCn"label="中文"></el-table-column><el-table-columnalign="center"prop="descriptionEn"label="英文"></el-table-column><el-table-columnalign="center"prop="person"label="人物"></el-table-column><el-table-column label="操作" width="400px;"><template slot-scope="scope"><el-buttontype="primary"size="mini"icon="el-icon-edit"plain>编辑</el-button><el-buttontype="warning"size="mini"icon="el-icon-s-custom":disabled="!editable"v-show="item.graphyId === 1 &&scope.row.chie === '否'">设为主演</el-button><el-buttonsize="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 = thislet moviePersonList = _this.moviePersonList.length > 0 ? _this.moviePersonList : []Sortable.create(tbody, {draggable: '.el-table__row',forceFallback: false, onEnd(evt) {const newIndex = evt.newIndexconst oldIndex = evt.oldIndexconst 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);// 复原拖拽之前的 domconst 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)}})},
