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

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

点击按钮后(勾选状态保留,不清空):
在这里插入图片描述
方法:用yearCheck数组存每个勾选框的勾选状态,传接口参数的时候再根据yearCheck每个元素的值进行操作。

  1. <el-form ref="selForm" :model="selForm" :rules="rules" label-width="80px">
  2. <el-form-item prop="flag">
  3. <el-checkbox v-model="yearCheck.jn">今年</el-checkbox>
  4. <el-checkbox v-model="yearCheck.syn">上一年</el-checkbox>
  5. <el-checkbox v-model="yearCheck.ssn">上上年</el-checkbox>
  6. <el-checkbox v-model="yearCheck.all">全部</el-checkbox>
  7. </el-form-item>
  8. </el-form>
  9. <el-button type="primary" size="mini" icon="el-icon-search" @click="searchClick">查询账单</el-button>
  10. data(){
  11. return(
  12. selForm:{ year:[],flag:''},
  13. yearCheck:{ jn:true,syn:false,ssn:false,all:false},
  14. rules: {
  15. flag: [
  16. { required: true, message: '请选择年份', trigger: 'change' }
  17. ]
  18. }
  19. )
  20. }

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

  1. methods:{
  2. searchClick(){
  3. if (this.yearCheck.jn == true||this.yearCheck.syn == true||this.yearCheck.ssn == true||this.yearCheck.all == true) {
  4. this.selForm.flag=1
  5. }
  6. this.$refs['selForm'].validate((valid) => {
  7. if (valid) { ...}
  8. })
  9. }
  10. }

发表评论

表情:
评论列表 (有 0 条评论,42人围观)

还没有评论,来说两句吧...

相关阅读