How to use render-header in table component in element

Posted May 25, 20202 min read

When doing management background development, you will encounter such a demand. The data displayed in this table is too long. The user wants to add a filter to manage the length of the table.
Similar screenshot:
93c2a4626de04e868ad361d4263e484.png

The element provides the render-header method in the table component.
WeChat Picture_20200525150339.png

Without further ado, just go directly to the code

    renderHeader(h, obj) {
        if(obj.column.label == 'operation') {
            return h('div', {}, [
                h('el-popover', {
                        props:{
                            placement:"bottom",
                            width:"150",
                            trigger:"click",
                        },
                    },
                    [
                        h('span', {
                            slot:'reference',
                            class:'ces-table-require',
                            domProps:{
                                innerHTML:obj.column.label + '<i class = "el-icon-s-tools pl10" />'
                            }
                        }),

                        h('el-checkbox-group', {
                            class:'bdb_m20',
                            style:{
                                'margin-bottom':'10px',
                                'border-bottom':'1px solid #efefef',
                                'padding-bottom':'10px'
                            },
                            props:{
                                'value':this.check,
                            },
                        }, [
                            this.checkList.map((item, index) => {
                                return h('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 = [... new Set(this.check)]
                                            } else {
                                                let i = 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:'Restore'
                            }
                        }),
                        h('el-button', {
                            props:{
                                size:"mini",
                                type:"primary"
                            },
                            on:{
                                click:_ => {
                                    let arr = this.tableCols.filter(item =>! this.check.some(ele => ele === item.label))
                                    this. $parent.tableCols = arr
                                }
                            },
                            domProps:{
                                innerHTML:'Hidden'
                            }
                        })

                   ])
           ])
        } else {
            return h("span", {}, obj.column.label)
        }


    },