摘要：
that.searchs[params.column.key]}type="text"onClick={e=˃that.setColumnParams}˃筛选that.setColumnParams}˃重置);data增加临时searchs存储：searchs:{name:''},//临时存储的search信息columns属性对应key的renderHeader{title:"姓名",key:"name",200,value:"",sortable:true,renderHeader:=˃searchInput,},调用的方法：setColumnParams{//重置分页this.$refs.selection.$el.click()//隐藏pop弹框constkey=params.column.key;if{this.columns[params.index].value='';this['searchs'][key]='';}else{this.columns[params.index].value=this['searchs'][key];}this.searchData();//查询api}涉及样式：.ivu-dropdown-transfer{position:absolute;top:0;left:0;}.ivu-dropdown-item:hover{background-color:#fff!
自定义search input：
const searchInput = (h, params, that) =>( <span class="search-area"> <span>{params.column.title}</span> <div class="pop-search-wrapper"> <Poptip popper- 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 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", 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>