Detaillierter Vue-Code zur Implementierung der Shuttle-Box-Funktion

.überweisen{
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}
.transfer>.list {
    Breite: 200px;
    Höhe: 300px;
    Rand: 1px durchgezogen #000;
    Listenstil: keiner;
}
.Inhalt{
    Schriftgröße: 30px;
    Rand: 0 20px;
}
.list>li{
    Polsterung: 5px;
    Box-Größe: Rahmenbox;
}

<div Klasse="Übertragung" >
    <!-- Linker Rahmen -->
    <ul class="Liste links">
        <template v-for="(Element, Index) in Info">
            <li :Schlüssel="index">
                <input type="checkbox" :id=`checkbox${item.id}` name="checkbox" :geprüft="item.select" @click="item.select=!item.select" />
                <label :for=`checkbox${item.id}` >{{ item.name }} </label>
            </li>
        </Vorlage>
    </ul>

    <!-- Hinzufügen/Entfernen -->
    <div Klasse="Inhalt">
        <p Klasse="drücken" @click='drücken' >>>></p>
        <p class="del" @click='del' ><<<</p>
    </div>

    <!-- Rechter Rahmen -->
    <ul Klasse="Liste rechts">
        <template v-for="(item, index) in new_info">
            <li :Schlüssel="Index" >
                <input type="checkbox" :id=`neueCheckbox${item.id}` name="neueCheckbox" :checked="item.select" @click="item.select=!item.select" />
                <label :for=`newcheckbox${item.id}`>{{ item.name }} </label>
            </li>
        </Vorlage>
    </ul>
</div>

Daten(){
    zurückkehren {
        // Originaldaten, Dateninfo für linken Frame:[
            {id:'1',name:'Xiao Ming'},
            {id:'2',name:'Xiaohong'},
            {id:'3',name:'Huhn'},
            {id:'4',name:'Hahahaha'},
            {id:'5',name:'Ahhhhh'},
            {id:'6',name:'dddd'},
            {id:'7',name:'qwert'},
        ],
        new_info: [], // Neue Daten, Daten des rechten Frames}
},
Methoden: {// Daten hinzufügen push(){
        lass das = dies;
        let info = JSON.parse(JSON.stringify(that.info)); // Originaldaten kopieren, tiefe Kopie info.forEach((item, index )=>{
            // Daten ausführen, bei denen select true ist, wenn (item.select){
                that.new_info = that.new_info.concat(item).sort((a,b)=>{ return a.id - b.id }); // Zum neuen Datenrahmen hinzufügen, sortieren delete info[index]; // Daten löschen item.select = false; 
            }
        })
        info = info.filter(function (val) { return val }); // Filter undefiniert 
        that.info = info; // Originaldaten aktualisieren\
    },
    // Daten entfernen del(){
        lass das = dies;
        let info = JSON.parse(JSON.stringify(that.new_info)); // Originaldaten kopieren, tiefe Kopie info.forEach((item, index )=>{
            // Daten ausführen, bei denen select true ist, wenn (item.select){
                that.info = that.info.concat(item).sort((a,b)=>{ return a.id - b.id }); // Zum neuen Datenrahmen hinzufügen, sortieren delete info[index]; // Daten löschen item.select = false;
            }
        })
        info = info.filter(function (val) { return val }); // Filter undefiniert 
        that.new_info = info; // Originaldaten aktualisieren},
},

montiert(){
    lass das = dies;
    // Fügen Sie den Originaldaten ein Auswahlfeld hinzu, um zu bestimmen, ob sie ausgewählt sind that.info.map((val,key)=>{ that.$set(val,'select',false) });
}