el-checkbox多选框在点击查询之后保留此次勾选状态（同时防止第二次点击查询的时候存储数组累加）

╰半夏微凉° 2023-06-19 09:32 7阅读 0赞

点击按钮后（勾选状态保留，不清空）：  
![在这里插入图片描述][20191205140214856.png]  
方法：用yearCheck数组存每个勾选框的勾选状态，传接口参数的时候再根据yearCheck每个元素的值进行操作。

<el-form ref="selForm" :model="selForm" :rules="rules" label-width="80px">
    	<el-form-item prop="flag">
            <el-checkbox v-model="yearCheck.jn">今年</el-checkbox>
            <el-checkbox v-model="yearCheck.syn">上一年</el-checkbox>
            <el-checkbox v-model="yearCheck.ssn">上上年</el-checkbox>
            <el-checkbox v-model="yearCheck.all">全部</el-checkbox>
    	</el-form-item>
    </el-form>
     <el-button type="primary" size="mini" icon="el-icon-search" @click="searchClick">查询账单</el-button>
    data(){ 
    	return(
    		selForm:{ year:[],flag:''},
    		yearCheck:{ jn:true,syn:false,ssn:false,all:false},
    		rules: { 
               flag: [
                   {  required: true, message: '请选择年份', trigger: 'change' }
               ]
            }
    	)
    }

通过表单验证flag，来间接控制年份必选：

methods:{ 
    	searchClick(){ 
    		if (this.yearCheck.jn == true||this.yearCheck.syn == true||this.yearCheck.ssn == true||this.yearCheck.all == true) { 
        		this.selForm.flag=1
    		}
    		this.$refs['selForm'].validate((valid) => { 
    		    if (valid) { ...}
    		}）
    	}
    }

[20191205140214856.png]: https://img-blog.csdnimg.cn/20191205140214856.png