Filter使用——Element做列内数据筛选

一、样式

做一个表格内按列搜索的功能，样式如下：

html

<div class="table_box"> 
        <el-table
        row-key="id"
        :data="pageResultArr"  
        border fit stripe style="width: 100%;"
        >
          <!-- <el-table-column type="selection" width="55" :align="tableAlgin"></el-table-column> -->
          <el-table-column label="区（市）县" :align="tableAlgin">
               <el-table-column label="" prop="areaName" width="300">
                  <template slot-scope="scope" slot="header">
                      <el-input v-model="searchObj.areaName" placeholder="筛选" clearable size="mini" @input="changeTotal"></el-input>
                  </template>
               </el-table-column>
          </el-table-column>

          <el-table-column label="年度" :align="tableAlgin"  >
               <el-table-column label="" prop="collectYear" :align="tableAlgin"  >
                  <template slot-scope="scope" slot="header">
                    <el-date-picker
                      v-model="searchObj.collectYear"
                      type="year"
                      placeholder="选择年"
                      >
                    </el-date-picker>
                  </template>
               </el-table-column>
          </el-table-column>

          <el-table-column label="月度" :align="tableAlgin"  >
               <el-table-column label="" prop="collectMonth" :align="tableAlgin"  >
                  <template slot-scope="scope" slot="header">
                      <el-select v-model="searchObj.collectMonth" placeholder="请选择" size="mini" @change="changeTotal">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </template>
               </el-table-column>
          </el-table-column>    
        </el-table>  
    </div>
  </div>

data（）
这里只包含了需要做筛选的三列需要绑定的变量

searchObj:{
          areaName:"",
          collectMonth:"-1",
          collectYear:""
        },

筛选方法

computed: {
      filterResultArr(){
        let resultArr = this.resultArr.slice(0);
        //筛选逻辑
        for(let key in this.searchObj){
          if(key == 'collectMonth'){
            if(this.searchObj[key] != -1){
              resultArr = resultArr.filter((item)=>{
                return item[key] == this.searchObj[key];
              })
            }
          }else if(this.searchObj[key].replace(/\s+/g,'') !== ''){
          //  \s： space， 空格
          //  +： 一个或多个
             resultArr = resultArr.filter((item)=>{
               return item[key].indexOf(this.searchObj[key]) > -1;
             })
          }
        }
        return resultArr;
      },
      pageResultArr(){
        let resultArr = this.filterResultArr.slice(0);
        //分页逻辑
        this.pagination.totalPage = Math.ceil((resultArr.length/this.pagination.pageSize));
        // this.pagination.total = resultArr.length;
        resultArr = resultArr.slice((this.pagination.curPage-1)*this.pagination.pageSize,(this.pagination.curPage)*this.pagination.pageSize)
        return resultArr;
      }
    },
    methods:{
    //获取数据的方法，findRegionalIndexList封装好的请求方法，不细说会写到另一篇文章里（还没写，写了再说）
      getData(){
        findRegionalIndexList({}).then(res => {
          if(res.messageCode === "000000"){
            this.resultArr = res.data
            this.pagination.total = this.filterResultArr.length
            this.listLoading = false;
          }else{
            this.$message.error(res.message);
            this.listLoading = false;
          }
        })
      },
    },
    created() {
      this.getData()
    }