在element中如何使用table組件中的render-header

在作管理後臺開發的時候會碰到這樣的一個需求,這個表格展現的數據太長了,用戶想加個篩選管理這個表格長度。
相似截圖:
93c2a4626de04e868ad361d4263e484.png微信

而element在table組件中有提供render-header這個方法。
微信圖片_20200525150339.pngdom

廢話很少說直接上代碼ui

renderHeader(h, obj) {
        if (obj.column.label == '操做') {
            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: '復原'
                            }
                        }),
                        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: '隱藏'
                            }
                        })

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


    },
相關文章
相關標籤/搜索