全选组件封装

本文主要是介绍全选组件封装，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<template>     <div>         <div id="app">             <div class="checkbox">                 <div for="quan">                     <!-- 这里的 $event 是将当前对象传入进去，具体详情请参照vue官方文档 -->                     <input id="quan" type="checkbox" @click="checkAll($event)"> 全选                 </div>                 <div v-for="item in ajaxData" :key="item.value">                     <!-- v-model 双向数据绑定命令 -->                     <input class="checkItem" type="checkbox" :value="item.value" v-model="checkData"> {{item.name}}                 </div>             </div>         </div>
    </div> </template>
<script>     export default {         data(){             return {                 ajaxData: [{ // 后台请求过来的数据                     name: '选项1',                     value: 'apple'                 },{                     name: '选项2',                     value: 'banana'                 },{                     name: '选项3',                     value: 'orange'                 }],                 checkData: [] // 双向数据绑定的数组             }         },         watch: {             checkData: { // 监视双向绑定的数组变化                 handler(){                     if(this.checkData.length == this.ajaxData.length){                         document.querySelector('#quan').checked = true;                     }else {                         document.querySelector('#quan').checked = false;                     }                 },                 deep: true             }         },         methods: {             checkAll(e){ // 点击全选事件                 if(e.target.checked){                     this.ajaxData.forEach((el,i)=>{                         // 数组里没有这一个value才push，防止重复push                         if(this.checkData.indexOf(el.value) == '-1'){                             this.checkData.push(el.value);                         }                     });                 }else { // 全不选选则清空绑定的数组                     this.checkData = [];                 }             }         }     } </script>

这篇关于全选组件封装的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！