初始化
插件引入参考其他文章
<div class="header-set-main">
<el-table
:data="dictList"
show-overflow-tooltip
height="450"
highlight-current-row
ref="dictTable"
:key="dictTableKey"
>
<el-table-column
align="center"
prop="name"
label="数据类型"
min-width="100"
/>
<el-table-column
align="center"
prop="sort"
label="排序"
min-width="40"
>
</el-table-column>
</el-table>
</div>
/*
*
*/
const rowDropInit = () => {
Sortable.create(dictTable.value.$el.children[2].children[0].children[1], {
animation: 150,
delay: 0,
onEnd: function (e) {
const res = state.dictList.splice(e.oldIndex, 1)[0];
state.dictList.splice(e.newIndex, 0, res);
state.dictList.forEach((item, index) => {
item.sort = index;
});
},
});
};
onMounted(async () => {
/*------------------
* 异步加载table数据
* ------------------
*/
nextTick(() => {
rowDropInit();
});
});
出现的问题
拖动后实际渲染的结果和table数据顺序不同,只要是因为虚拟dom和真实dom不同步
解决方案
给当前table绑定一个key值。当出现拖动事件即修改key值,强制整个table更新。但是需要在table更新后重新注册拖动功能
const rowDropInit = () => {
Sortable.create(dictTable.value.$el.children[2].children[0].children[1], {
animation: 150,
delay: 0,
onEnd: function (e) {
const res = state.dictList.splice(e.oldIndex, 1)[0];
state.dictList.splice(e.newIndex, 0, res);
state.dictList.forEach((item, index) => {
item.sort = index;
});
//通过更新el-table的key值来保证table排序的数据渲染正确。
state.dictTableKey++;
},
});
};
/*
* 监听table的key值,重新注册拖动功能
*/
watch(
() => state.dictTableKey,
() => {
nextTick(() => {
rowDropInit();
});
}
);
拖动后正确的排序结果: