實用sortablejs在vue項目中實現表格行拖拽排序

你可能會發現，表格排序是可以實現，但是我們基于數據驅動的vue中關聯的數據并沒有發生變化， 如果你的表格帶有列固定(固定列實際上在dom中有兩個表格，其中固定的列在一個表格中，其他表格再另一個表格中)，如果你再固定列加的拖拽，只變固定列，其他非固定列并不變，或者你在非固定列增加了拖拽，但是固定列卻也不變化。

發生這個問題的主要原因是，sortablejs 實際上變化的是dom，也就是說在呈現層面上發生了變化。所以你需要在拖拽完成之后，去手動變化數據的排序。
你手動變化排序之后，你會發現也支持你的數據順序變化了，但是頁面上依然不更新。

我們先一個個來解釋：
1 如果有固定列，實際上你變化的是固定列，二非固定列不變化。

如上圖，這就是帶有固定列。


這個是給固定列添加拖拽。
此時問題就來了，表現層：

你會發現，固定列拖拽，位置變了，但是非固定部分，卻不會跟著變化。這就是不是同一個表格的原因。sortablejs 只變化了所在表格的dom結構，和非固定部分并不在同一個表格。這時你會相當去變數據。使其數據同步后看問題能否解決。
你會在onEnd 事件中，拿到新位置和老位置的索引，然后利用索引對數據進行切換。

為避免問題，我這里實在onStart中去拿當前數據，然后在onEnd中判斷后去新舊數據進行替換的。

這時你會發現，數據已經變好了，但是頁面依然是有如上圖的效果，不會更新表格數據的結構。這時因為我們在這里做的表格數據替換，不會觸發表格更新。所以這里你需要想辦法讓讓表格重新渲染。

你可能會想到很多辦法，我這里就很簡單處理下。

你把表格渲染所依賴的數據先清空，然后再把剛才排完序的數據重新賦值給表格即可。

這樣就完成了，退拽后，無論是拖拽固定列或者非固定列，基于vue的數據驅動實現重新渲染排完序的表格。