根据复选框的值进行表格数据的筛选

效果图

#点击后效果

数据显示有点问题.不过这不是重点

#代码部分
html

    <li><p>考核周期</p>
              <p> <el-checkbox-group v-model="checkList" @change="getValue">
                                            <el-checkbox label="月"></el-checkbox>
                                            <el-checkbox label="双月"></el-checkbox>
                                            <el-checkbox label="季度"></el-checkbox>
                                            <el-checkbox label="半年"></el-checkbox>
                                            <el-checkbox label="年"></el-checkbox>
                                        </el-checkbox-group>
              </p></li>

 getValue(){
     
            this.tableData=this.tableData1
            //tableData 和 tableData1 是表格数据放在连个数据里面
            let articles_array = this.tableData,
                searchString = this.checkList,
                //checkList 复选框的值 数组
                arr=[]
            console.log(searchString)

            articles_array =articles_array.filter(function(item){
     
            //filter方法  不懂百度
               if(searchString.includes(item.formalCycle)){
     
                   // console.log(item)
                   arr.push(item)
                   //如果searchString.includes(item.formalCycle)为true的话 数组arr添加这个item
               }
               // console.log(arr)
            })
            this.tableData=arr
            //最后把数据重新赋值给tableData
          
        },

为什么要把数据赋值给两个数组?

比如我选择了 月这个条件
tableData里面的数据就只有符合月条件的数据 而没有其他的季度,半年等
所有把所有的数据赋值给tableData1
每次都从tableData1 中取值 数据一直是完整的