专栏首页用户7363577的专栏vue+element踩坑记-checkbox的全选和全不选的操作实现

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

需求分析

在做一个业务的时候,有一个需求是多个条件进行筛选,全部是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:'会场费'}],

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VUE导出文件到EXCEL表格实例演示

    PS:如果最后你们使用的时候,效果和我的不一样,那么需要反思一下了,为什么不一样,是不是js文件没有导入呢?如果你下载了我的git上面的代码就不会有问题,因...

    何处锦绣不灰堆
  • NodeJS知识点梳理-第二篇

    这里就不打开这个writeMe2.txt文件了,内容有点多,截图了你们看着也没什么意思。你们自己运行一下就可以了。

    何处锦绣不灰堆
  • 多方位测试一下for循环不同写法的性能差别

    何处锦绣不灰堆
  • emmet(Zen coding)帮助文档

    deepcc
  • interface引发的事件真相

    流动的水没有形状,漂流的风找不到踪迹,一切代码都了然于心,我们在写代码的时候,总是有一种思维定式陪伴左右,在对事物做判断的时候,往往这种思维定式会往正向或反向做...

    李海彬
  • 使用PicGo+Github搭建免费图床

    最后点击Generate token即可看到显示的token页面,它只会显示一次,关闭页面后再打开这个页面就不会显示了。复制token值粘贴到文本文档中,先保存...

    YangAir
  • HTML5新增的表单验证功能

    Leophen
  • 一种基于定性理论答案集的编码推理通用方法(CS)

    译文:定性推理涉及到根据定性术语(如自然语言表达式)表达和推导知识,而不是严格的数学量。到目前为止,已经提出了超过40种定性计算方法,主要是在空间和时间领域,有...

    N乳酸菌
  • 牛顿法与拟牛顿法

    牛顿法和拟牛顿法是求解无约束最优化的常用方法,有收敛速度快的优点. 牛顿法属于迭代算法,每一步需要求解目标函数的海赛矩阵的逆矩阵,计算复杂. 拟牛顿法通过正定...

    JNJYan
  • ELK分析ngx_lua_waf软件防火墙日志

    https://github.com/loveshell/ngx_lua_waf

    三杯水Plus

扫码关注云+社区

领取腾讯云代金券