在Vue中如何操作自訂指令實現checkbox全選功能
- 亚连原創
- 2018-06-02 17:26:102402瀏覽
下面我就為大家分享一篇Vue自訂指令實現checkbox全選功能的方法，具有很好的參考價值，希望對大家有所幫助。
最近做的一個專案需要用到Vue實現全選功能，參考了一下網路上的做法，發現用屬性計算的複用性不高，於是選用自訂指令，但網路上的做法大多是會對原始資料有一定的格式要求，而且沒有回傳結果，於是做了改進。
上程式碼：
<!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>
#通常我們都必須取得原始資料中的某個鍵值，可在「key」中填進想要取得的鍵值，「result」就是被選取的項了。
有時，我們需要傳回一個完整的物件修改一下程式碼，當不輸入key時，傳回一個完整的物件陣列
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
}
但時，這時，傳回的數組中物件中並沒有與原始資料是相同的參考位址，當需要使用array.$remove()函數時就會失敗，新增一個relative參數，使用者自訂判斷傳回的資料是否與原始資料關聯
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
}
當資料長度大於2個時，需要判斷2N次，相當消耗效能，最佳化一下：
'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()
},
}
這時只需要判斷N 1次。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是在Vue中如何操作自訂指令實現checkbox全選功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn