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

何处锦绣不灰堆

发布于 2020-05-29 09:32:29

3.1K0

发布于 2020-05-29 09:32:29

文章被收录于专栏：农历七月廿一农历七月廿一

需求分析

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

实现过程

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

效果预览

源码

	  /**
       * @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:'会场费'}],