vue+element-checkbox的全选和全不选的操作实现

女爷i 2022-02-01 07:35 265阅读 0赞

##### 需求分析 #####

在做一个业务的时候，有一个需求是多个条件进行筛选，全部是checkbox的筛选条件，可以进行任意一个的选择还可以进行全选和全不选，这样进行表格的筛选

##### 实现过程 #####

原本准备直接使用组件里面自带的方法实现的，但是写的时候发现满足不了，后来分析了一下，数据的格式就知道大概怎么实现了

##### 效果预览 #####

![预览][20190513201920483.gif]

##### 源码 #####

/** * @check_All_Change 全选操作 */
          check_All_Change() { 
            let that = this;
            /** * 将全部的信息添加到绑定的数组里面去，这样可以实现一个全选的效果 * @type {any[]} */
            that.type_of_cost = that.item_type_of_costs.map((res)=>{ 
                 return res.code;
            });
          },
          /** * @check_Nll_Change 全不选操作 */
          check_Null_Change(){ 
            let that = this;
            that.type_of_cost = [];
          },

item_type_of_costs : 是checkbox绑定的数组
    type_of_cost ： 绑定的是用户选择的checkbox的数组

<el-row>
                    <el-col :span="24">
                      <el-checkbox-group v-model="type_of_cost" @change="condition_inquire">
                        <el-checkbox v-for="(item_type_of_cost,index) in item_type_of_costs" :label="item_type_of_cost.code" :key="item_type_of_cost.code">{
       {item_type_of_cost.descript}}</el-checkbox>
                      </el-checkbox-group>
                    </el-col>
    </el-row>

/**
    * 测试数据
    */
     type_of_cost : [],//用户选择的筛选条件
            item_type_of_costs : [{label : '夜审费',code : 123,descript:'夜审费'},{label : '钟点房费',code : 456,descript:'钟点房费'},{label : '会场费',code : 789,descript:'会场费'}],

> PS:这里写几个函数都行，写一个或者两个都是没有区别的，巧妙的写法是直接写一个函数，点击的时候判断当前是全选还是全不选，进而执行不同的代码，这里就不重复写了，改起来很简单。

[20190513201920483.gif]: /images/20220201/d979a8d4e5e44c7bab6ed92c0ce13266.png