需求分析
在做一个业务的时候,有一个需求是多个条件进行筛选,全部是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:这里写几个函数都行,写一个或者两个都是没有区别的,巧妙的写法是直接写一个函数,点击的时候判断当前是全选还是全不选,进而执行不同的代码,这里就不重复写了,改起来很简单。