Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

<s-テーブル
 ref="テーブル"
 サイズ="デフォルト"
 クラス="左テーブル"
 rowKey="キー"
 :columns="列"
 :data="データをロード">
</s-テーブル>
  
<s-テーブル
 クラス="ソートテーブル"
 ref="テーブル2"
 サイズ="デフォルト"
 クラス="左テーブル"
 rowKey="キー"
 :columns="列"
 :data="データをロード">
</s-テーブル>

'sortablejs' から Sortable をインポートします。
方法:{
 // ドラッグを実装するためにソート可能を初期化する initSortable () {
 var that = これ
 var el = this.$el.querySelector('.sort-table tbody')
 ソート可能.create(el, {
 ハンドル: '.ant-table-row',
 アニメーション: 150,
 グループ: { 名前: 'name'、プル: true、プット: true }、
 onUpdate: 関数 (evt) {
 
 },
 // ドラッグ開始時 onStart: function (evt) {
  
 },
 onAdd: 関数 (イベント) {
  
 },
 onRemove: 関数 (evt) {
 
 }
 })
 },
 ソート可能な初期化1(){
 var that = これ
 var el = this.$el.querySelector('.left-table tbody')
 ソート可能.create(el, {
 ハンドル: '.ant-table-row',
 アニメーション: 150,
 グループ: { 名前: 'name'、プル: true、プット: true }、
 onUpdate: 関数 (evt) {
 
 },
 // ドラッグ開始時 onStart: function (evt) {
  
 },
 onAdd: 関数 (イベント) {
  
 },
 onRemove: 関数 (evt) {
 
 }
 })
 },
 }

データ（）{
 戻る {
 unMatchedList: [], // 左側の一致しないデータ dataList: [], // 右側の一致するデータ pullIndex: '', // 元の配列ドラッグ要素のインデックス}
}

 // ドラッグ開始時 onStart: function (evt) {
  that.pullIndex = evt.oldIndex
 },
 onAdd: 関数 (イベント) {
 //evt.newIndex は新しい配列のインデックスに移動します //pullIndex は元の配列内のドラッグされた要素のインデックスです that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex])
  that.dataList.forEach((item, index) => {
  アイテム.ソート = インデックス + 1
  })
  //テーブルビューに更新を通知します。$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		 that.$refs.table && this.$refs.table.refresh(true)
  })
 },
 onRemove: 関数 (evt) {
  that.dataList.splice(evt.oldIndex, 1)
  that.dataList.forEach((item, index) => {
  アイテム.ソート = インデックス + 1
  })
  $nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		that.$refs.table && this.$refs.table.refresh(true)
  })
 }
 })

ソート可能な初期化(){
 var that = これ
 var el = this.$el.querySelector('.sort-table tbody')
 ソート可能.create(el, {
 ハンドル: '.ant-table-row',
 アニメーション: 150,
 グループ: { 名前: 'name'、プル: true、プット: true }、
 //ここではonEndメソッドを使用しないでください onUpdate: function (evt) {
  var o = evt.oldIndex
  var n = evt.newIndex
  （o === n）の場合{
  戻る
  }
  that.sortListAndUpdate(that.dataList, o, n)
 },
 })
 },
 // o (oldIndex) と n (newIndex) が 0 から始まるようにデータをソートします sortList (list, o, n) {
 var newTableData = JSON.parse(JSON.stringify(リスト))
 var データ = newTableData.splice(o, 1, null)
 newTableData.splice(o < n ? n + 1 : n, 0, data[0])
 newTableData.splice(o > n ? o + 1 : o, 1)
 新しいテーブルデータを返す
 },
 /**
 * データをソートしてテーブルを更新します。o (oldIndex) と n (newIndex) は 0 から始まる必要があります*/
 ソートリストと更新 (リスト, o, n) {
 var newTableData = this.sortList(リスト、o、n)
 newTableData.forEach((アイテム、インデックス) => {
 アイテム.ソート = インデックス + 1
 })
 this.$nextTick(() => {
 this.dataList = 新しいテーブルデータ
 that.$refs.table2 && this.$refs.table2.refresh(true)
 })
 },