vue2中表头中添加搜索

方法一 1 自定义表头

<el-table-column  prop="standardType" label="类型">
                <template #header>
                    <el-popover placement="bottom" title="请选择" width="200" trigger="click"  :visible-arrow="false"     v-model="visible">
                        <div slot="reference" class="search-header">
                            <span class="search-title">类型</span>
                            <svg-icon icon-class="funnel" style="margin-left:5px;"></svg-icon>
                        </div>
                        <el-checkbox-group  v-model ="standardTypeSelect">
                          <el-checkbox v-for="item in standardTypeList" :label="item.value" :key="item.value"></el-checkbox>
                        </el-checkbox-group>
                        <div>
                      <el-button type="text" @click="searchData">筛选</el-button>
                      <el-button type="text" @click="clearStandardType">清空</el-button>
                    </div>
                    </el-popover>
                </template>
                <template slot-scope="scope">
                    {{ scope.row.standardType }}
                </template>
                </el-table-column>

2 添加方法

clearStandardType(){
    this.standardTypeSelect = []
    this.searchData()
  },
  searchData(){
    this.visible = false
      this.tableData1=[]
      if (this.standardTypeSelect.length != 0){
        this.tableData.forEach(item => {
          if(this.standardTypeSelect.includes(item.standardType)){
            this.tableData1.push(item)
          }
        })
      }else{
        this.tableData1 = this.tableData
      }
  },

方法二 1 element ui 中table组件过滤属性

<el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>

2 筛选方法

filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }

3 清除过滤器

//清除指定过滤器
resetDateFilter() {
   this.$refs.filterTable.clearFilter('date');
},
//清除所有过滤器
   clearFilter() {
     this.$refs.filterTable.clearFilter();
 },