要素 el-transfer コンポーネントは、右側のリストのドラッグ可能な効果を実現します。

要件は、転送シャトル ボックスで選択されたデータ リストを実装することであり、ドラッグ アンド ドロップで並べ替えることができます。

---

主にsortablejsプラグインを使用します。

まずはsortablejsをインストールします

npm install sortablejs --save

再利用したvueファイル内のプラグインを参照

<el-transfer 
    ref="transfer" 
    v-model="form" :data="groupModalList"
    :titles="['未选', '已选']"
    @change="transferList"
    target-order="push"
>
</el-transfer>


import Sortable from 'sortablejs'

data () {
    return {
        form: [],
        groupModalList: []
    }
}

methods: {
   transferList (e) {
      this.$forceUpdate() 
   } 
}

mounted() {
    this.$nextTick(() => {
        const transfer = this.$refs.transfer.$el
        const rightPanel = transfer.getElementsByClassName('el-transfer-panel')[1].getElementsByClassName('el-transfer-panel__body')[0]
        const rightEl = rightPanel.getElementsByClassName('el-transfer-panel__list')[0]
        Sortable.create(rightEl, {
          onEnd: evt => {
            const { oldIndex, newIndex } = evt
            console.log(oldIndex, newIndex)
            let _arr = this.form.splice(oldIndex, 1)
            this.form.splice(newIndex, 0, _arr[0])
            console.log(this.form)
          }
        })
      })
}

• transferList の $forceUpdate は、リスト データを強制的に更新します。
• target-order="push" をプッシュ モードに設定することをお勧めします。これにより、左側で選択した項目が右側の最後に追加され、見やすくなります。
• 上記のthis.$nextTick メソッドは、mounted で記述することもできますが、もちろん、ポップアップ層にシャトルボックスを配置したい場合は、mounted で記述せず、 というメソッドで記述することをお勧めします。ポップアップ レイヤーのオープンをトリガーします (つまり、メソッド内でポップアップレイヤーが表示 = true)。