Le composant élément el-transfer réalise l'effet déplaçable de la liste de droite

Il s'agit d'implémenter la liste de données sélectionnée dans la zone Navette de transfert, triable par glisser-déposer.

---

Utilisez principalement le plugin sortablejs.

Installez d’abord sortablejs

npm install sortablejs --save

Reportez-vous au plugin dans le fichier vue réutilisé

<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)
          }
        })
      })
}

• $forceUpdate dans transferList consiste à forcer la mise à jour des données de la liste.
• Il est recommandé de définir target-order="push" en mode push, afin que l'élément sélectionné à gauche soit ajouté à l'extrémité de droite pour une visualisation facile.
• La méthode this.$nextTick ci-dessus peut être écrite en monté. Bien sûr, si vous souhaitez placer la boîte de navette dans la couche contextuelle, ne l'écrivez pas en monté. Il est recommandé de l'écrire dans la méthode qui déclenche l'ouverture du calque pop-up (c'est-à-dire le calque pop-up visible = true dans la méthode).