Jetzt werde ich Ihnen eine Methode zur Verwendung benutzerdefinierter Vue-Anweisungen zur Implementierung der Kontrollkästchen-Auswahlfunktion vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.
Ein Projekt, an dem ich kürzlich gearbeitet habe, erforderte die Verwendung von Vue zur Implementierung der „Alle auswählen“-Funktion. Ich habe mir die Online-Praktiken angesehen und festgestellt, dass die Wiederverwendbarkeit von Attributberechnungen nicht hoch war, also habe ich benutzerdefinierte Anweisungen gewählt. Bei den meisten Online-Praktiken gelten bestimmte Formatanforderungen für die Originaldaten und es werden keine Ergebnisse zurückgegeben. Daher wurden Verbesserungen vorgenommen.
Der obige Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<input type="checkbox" v-model="allCheck" v-check-all="allCheck" check-data="list" result="customerResult" key="demo"> 全选
<ul>
<li v-for="item in list">
<input type="checkbox" v-model="item.checked">
{{item.demo}}
</li>
</ul>
<p >
customerResult: {{customerResult}}
</p>
</p>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:function(){
return {
list:[{demo:1},
{demo:2},
{demo:3}],
allCheck:'',
customerResult:'',
}
},
directives: {
'check-all': {
twoWay: true,
params: ['checkData','result','key'],
bind() {
/*为原始数据的每一个对象添加一个checked属性*/
this.vm[this.params.checkData].forEach((item)=>{
Vue.set(item,'checked',false)
});
/*提取被选中的项*/
this.setValue=function(){
let result=[]
this.vm[this.params.checkData].forEach((item) => {
if(item.checked){
result.push(item[this.params.key])
}
});
this.vm[this.params.result]=result
}
/*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */
this.vm.$watch(this.params.checkData, (data) => {
if(data.every((item) => item.checked)) {
this.set(true);
} else {
this.set(false);
}
this.setValue()
}, {deep: true});
},
// checkAll发生更改时
update(checkAll) {
/*如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */
if(checkAll) {
this.vm[this.params.checkData].forEach((item) => {
item.checked = true;
});
} else {
this.vm[this.params.checkData].forEach((item) => {
item.checked = false;
});
}
this.setValue()
},
},
}
})
</script>
</body>
</html>Nach dem Login kopieren
Normalerweise müssen wir einen bestimmten Schlüsselwert in den Originaldaten erhalten, der finden Sie unter Geben Sie „key“ mit dem Schlüsselwert ein, den Sie erhalten möchten, und „result“ ist das ausgewählte Element.
Manchmal müssen wir ein vollständiges Objekt zurückgeben und den Code ändern. Wenn der Schlüssel nicht eingegeben wird, müssen wir ein vollständiges Array von Objekten zurückgeben
this.setValue=()=>{
let result=[]
this.vm[this.params.checkData].forEach((item) => {
//删除checked属性
let temp={};
(()=>delete Object.assign(temp,item).checked)();
item.checked?result.push(item[this.params.key]||temp):"";
});
this.vm[this.params.result]=result
}Nach dem Login kopieren
Aber Wenn zu diesem Zeitpunkt das Objekt im zurückgegebenen Array nicht dieselbe Referenzadresse wie die Originaldaten hat. Wenn die Funktion array.$remove() verwendet werden muss, wird ein neuer relativer Parameter hinzugefügt Der Benutzer kann die zurückgegebenen Daten anpassen.
this.setValue = () => {
let result = []
this.vm[this.params.checkData].forEach((item) => {
if(this.params.relative) {
item.checked ? result.push(item) : "";
}else{
//删除checked属性
let temp = {};
(() => delete Object.assign(temp, item).checked)();
item.checked ? result.push(item[this.params.key] || temp) : "";
}
});
this.vm[this.params.result] = result
}Nach dem Login kopieren
Wenn die Datenlänge größer als 2 ist, muss sie mit 2N beurteilt werden Zeiten, die viel Leistung verbrauchen:
'check-all', {
twoWay: true,
params: ['checkData', 'result', 'key','relative'],
/*checkData:列表数据,
result:返回的结果,
key:列表数据中需要返回的字段,
relative:是否返回与列表数据相同引用地址的选中结果*/
bind() {
/*提取被选中的项*/
this.setValue = () => {
let result = []
if (this.params.relative) {
this.vm[this.params.checkData].forEach((item) => {
item.checked ? result.push(item) : "";
});
} else {
this.vm[this.params.checkData].forEach((item) => {
//删除checked属性
let temp = {};
(() => delete Object.assign(temp, item).checked)();
item.checked ? result.push(item[this.params.key] || temp) : "";
});
}
this.vm[this.params.result] = result
};
/*为原始数据的每一个对象添加一个checked属性*/
this.addChecked = () => {
this.vm[this.params.checkData].forEach((item) => {
Vue.set(item, 'checked', false)
});
};
/*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */
this.vm.$watch(this.params.checkData, (data) => {
if(!data.length) return;
data.every((item) => item.checked) ? this.set(true) : this.set(false);
this.setValue()
}, {deep: true});
//当列表发生变化时重新绑定
this.vm.$watch(this.params.checkData, (data) => {
if(!data.length) return
this.addChecked();
});
},
// checkAll发生更改时
update(checkAll) {
/*如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */
checkAll ? this.vm[this.params.checkData].forEach((item) => {
item.checked = true
}) : this.vm[this.params.checkData].forEach((item) => {
item.checked = false
});
this.setValue()
},
}Nach dem Login kopieren
Zu diesem Zeitpunkt müssen Sie nur N+1 Mal beurteilen.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
p5.js Einführungs-Tutorial – Beispiel für Mausinteraktion
Vier Möglichkeiten zur bidirektionalen Implementierung Bindung mit Vue-Methoden
Hervorhebungseinstellungsmethode für Vue-Routing-Navigationsmenüleiste
Das obige ist der detaillierte Inhalt vonSo verwenden Sie benutzerdefinierte Anweisungen in Vue, um die Kontrollkästchen-Auswahlfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
