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

2020-05-29 09:32:29 浏览数 (2)

需求分析

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

实现过程

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

效果预览
源码
代码语言:javascript复制
	  /**
       * @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 = [];
      },
代码语言:javascript复制
item_type_of_costs : 是checkbox绑定的数组
type_of_cost : 绑定的是用户选择的checkbox的数组
代码语言:javascript复制
 <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>
代码语言:javascript复制
/**
* 测试数据
*/
 type_of_cost : [],//用户选择的筛选条件
        item_type_of_costs : [{label : '夜审费',code : 123,descript:'夜审费'},{label : '钟点房费',code : 456,descript:'钟点房费'},{label : '会场费',code : 789,descript:'会场费'}],

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

0 人点赞