前端多选框筛选数据

html

  <i-col :span="4">
               <CheckboxGroup v-model="form.filter" @on-change="changeBox">
              <FormItem>
             <Checkbox label="0">正常记录</Checkbox>
               <Checkbox label="1">待核验</Checkbox>
                 <Checkbox label="2">差异记录</Checkbox>
                 </FormItem>
                  </CheckboxGroup>
            </i-col>

js

   data() {
        return {
        form: {
            filter:["0","1","2"]//默认全选
        },
        allData:[],//接口取到所有数据
        newData:[],//筛选后的数据
        };
  },
        changeBox(e){
      let fil=e;
      fil.sort();
      let str=fil.join();
      let List=this.allData;
      switch (str){
        case '':
           this.newData=[];
           break;
        case '0,1,2':
          this.newData=List;
             break;
        case '0':
          this.newData= List.filter(u => u.detailsource == '匹配通过');
             break;
        case '1':
            this.newData=List.filter(u => u.check == '1');
               break;
        case '2':
          this.newData=List.filter(u => u.detailsource == '银行系统'||u.detailsource == '报销系统');
             break;
        case '0,1':
          this.newData = List.filter(u => u.detailsource == '匹配通过'||u.check == '1');
             break;
        case '0,2':
             this.newData = List.filter(u => u.detailsource == '匹配通过'||u.detailsource == '银行系统'||u.detailsource == '报销系统');
                break;
        case '1,2':
          this.newData = List.filter(u => u.check == '1'||u.detailsource == '银行系统'||u.detailsource == '报销系统');
             break;
      }
    },,