应用场景：
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)
}
})
},
