iview table表头自定义筛选

自定义search input：

const searchInput = (h, params, that) => (
  <span class="search-area">
    <span>{params.column.title}</span>
    <div class="pop-search-wrapper">
      <Poptip popper-class="table-search-pop" transfer={true} transfer={true} placement="bottom" offset={8}> 
        <Icon type="ios-funnel" class={`search-funnel2 ${!that.serachVal(params.column.value)&&'search-funnel-hover'}`} color={that.serachVal(params.column.value) ? "#2d8cf0" : "#c5c8ce"}/>
          <div class="pop-input-search" slot="content">
            <div class="con-box">
              <Input search placeholder="" onOn-change={e => that.changeValue(e, params)} value={params.column.value} />
            </div>
            <div class="pop-search-footer ivu-table-filter-footer">
              <Button disabled={!that.searchs[params.column.key]} type="text" onClick={ e => that.setColumnParams(params)}>筛选</Button>
              <Button type="text" onClick={ e => that.setColumnParams(params, 'reset')}>重置</Button>
            </div>
          </div>
      </Poptip>
    </div>
  </span>);

data增加临时searchs存储：

searchs: {
        name: ''
      }, //临时存储的 search信息

columns属性对应key的renderHeader

{
          title: "姓名",
          key: "name",
          width: 200,
          value: "",
          sortable: true,
          renderHeader: (h, params) => searchInput(h, params, this),
        },

调用的方法：

setColumnParams(params, type) {  // 重置分页
      this.$refs.selection.$el.click() // 隐藏pop弹框
      const key = params.column.key;
      if(type === 'reset') {
        this.columns[params.index].value =  '';
        this['searchs'][key] = '';
      } else {
        this.columns[params.index].value = this['searchs'][key];
      }
      this.searchData(); //查询api
    }

涉及样式：

<style lang="less">
.ivu-dropdown-transfer{
  position: absolute;
  top: 0;
  left: 0;
}
.ivu-dropdown-item:hover{
  background-color: #fff!important;
}
.search-area {
  position: relative;
  display: inline-block;
}
.search-funnel{
  position: absolute;
  right: -36px;
  top: 3px;
}
.search-funnel2{
  position: relative;
  right: -8px;
  transition: color 0.2s ease-in-out;
}
.search-funnel-hover{
  &:hover{
    color: #515a6e!important;
  }
}
.pop-search-wrapper{
  position: absolute;
  right: -28px;
  top: -1px;
}
.pop-search-footer{
  &.ivu-table-filter-footer{
    padding: 0!important;
  }
}
.table-search-pop{
  .ivu-poptip-body{
    padding: 0!important;
  }
  .con-box{
    padding: 0 12px 8px;
    .p-checkbox-box{
      margin-bottom: 10px;
    }
  }
}
.pop-input-search{
  padding-top: 10px;
  width: 280px;
  background: #fff;
  z-index: 1;
  border-radius: 4px;
}

.button-box{
  display: flex;
  padding-bottom: 10px;
  margin-bottom: -22px;
  border-top: 1px solid #EFEFEF;
  span{
    flex: 1;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    color: #4390FF;
  }
}
.search-checkbox{
  .pop-input-search{
    width: 160px;
  }
}
.page-wrapper{
  padding-top: 50px;
  text-align: center;
}
</style>