Vue自定義指令實現checkbox全選功能的方法

來源：懂視網責編：小采時間：2020-11-27 22:18:27

Vue自定義指令實現checkbox全選功能的方法

Vue自定義指令實現checkbox全選功能的方法:最近做的一個項目需要用到Vue實現全選功能，參考了一下網上的做法，發現用屬性計算的復用性不高，于是選用自定義指令，但網上的做法大多是會對原始數據有一定的格式要求，而且沒有返回結果，于是做了改進。上代碼： <!DOCTYPE html> <h

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue自定義指令實現checkbox全選功能的方法:最近做的一個項目需要用到Vue實現全選功能，參考了一下網上的做法，發現用屬性計算的復用性不高，于是選用自定義指令，但網上的做法大多是會對原始數據有一定的格式要求，而且沒有返回結果，于是做了改進。上代碼： <!DOCTYPE html> <h

最近做的一個項目需要用到Vue實現全選功能，參考了一下網上的做法，發現用屬性計算的復用性不高，于是選用自定義指令，但網上的做法大多是會對原始數據有一定的格式要求，而且沒有返回結果，于是做了改進。

上代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <div 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> 
 <div >
 customerResult: {{customerResult}}
 </div>
 </div>
 <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全選功能的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com