在做管理后台开发的时候,会遇到这样的需求。此表中显示的数据太长,用户想添加一个过滤器来管理表的长度。类似截图:element在table组件中提供了render-header方法。废话不多说直接上代码renderHeader(h,obj){if(obj.column.label=='operation'){returnh('div',{},[h('el-popover',{props:{placement:"bottom",width:"150",trigger:"click",},},[h('span',{slot:'reference',class:'ces-table-require',domProps:{innerHTML:obj.column.label+''}}),h('el-checkbox-group',{class:'bdb_m20',style:{'margin-bottom':'10px','border-bottom':'1pxsolid#efefef','padding-bottom':'10px'},props:{'value':this.check,},},[this.checkList.map((item,index)=>{returnh('el-checkbox',{props:{label:item.label,'true-label':item.label,key:index,disabled:index==this.checkList.length-1?true:false,checked:this.check[index]==item.label?true:false},on:{change:val=>{if(val){this.check.push(item.label)this.check=[...newSet(this.check)]}else{leti=this.check.findIndex(row=>row==item.label)this.check.splice(i,1)}}},})})]),h('el-button',{props:{size:"mini"},on:{click:_=>{this.check=[]this.$parent.tableCols=this.checkList}},domProps:{innerHTML:'复原'}}),h('el-button',{props:{size:"mini",type:"primary"},on:{click:_=>{letarr=this.tableCols.filter(item=>!this.check.some(ele=>ele===item.label))this.$parent.tableCols=arr}},domProps:{innerHTML:'隐藏'}})])])}else{返回h("sp一个",{},obj.column.label)}},