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