自定义多个checkbox点击查询数据方法

项目中存在多个checkbox,点击其中一项根据条件查询数据的时候,我们将查询条件定义成数组,根据点击传入的参数,向数组中添加或删除数组中元素生成新的查询条件。

1.页面结构

2.初始化data

data()  {
	return {
		choose1: true,
        choose2: true,
        conditions: ['条件1', '条件2']
	}
}

3.自定义方法

choose(c) {
	let conditions = this.conditions;
	if(c === '条件1' && this.choose1) {
		this.choose1 = false;
		// 去除数组中指定元素
        let index = c.indexOf('条件1');
        if (index > -1) {
          c.splice(index, 1);
        }
	} else if (c === '条件1' && !this.choose1) {
		this.choose1 = true
		c.push('条件1');;
	}
	if(c === '条件2' && this.choose2) {
		this.choose2 = false;
		// 去除数组中指定元素
        let index = c.indexOf('条件2');
        if (index > -1) {
          c.splice(index, 1);
        }
	} else if (c === '条件2' && !this.choose2) {
		this.choose2 = true
		c.push('条件1');;
	}
	
let obj = {
	c: c, // 存放筛选数据条件数组
	ch: { // 存放勾选按钮状态的对象
    	ch1: this.choose1,
    	ch2: this.choose2
          }
    };
    this.chooseAjax(obj);
}

chooseAjax(obj)  {
	// 改变checkbox按钮状态
	this.choose1 = obj.ch.ch1;
    this.choose2 = obj.ch.ch2;
    // 根据条件发送ajax
    ...
}

你可能感兴趣的:(Vue)