The el-table component in elementui uses the render-header method, but it is executed many times after binding. I don't know why.

has not been called many times. Has anyone ever encountered this situation?

components component
< el-table-column
: width= "width"
: prop= "propChild"
: label= "label"
: editable= "editable"
: render-header= "renderHeader"
: fixed= "fixed" / / this attribute causes renderHeader functions to be called one more time
: search= "search"
: popover= "popoverChild"
: fieldExtra= "fieldExtra"
: param= "paramChild"
: callback= "callback=" > < callback > < / br > < /

renderHeader (createElement, {column,$index}) {/ / this is judged by type

if(this.search === true){
    if(this.renderType === 3 || this.renderType === 7){
        return this.renderInput(createElement,{column,$index})
    }
    else if(this.renderType === 5){
        return this.renderCheckboxSelect(createElement,{column, $index})
    }
    else if(this.renderType === 6){
        return this.renderDate(createElement,{column, $index})
    }
}else{
    return column.label
}

},

renderCheckboxSelect (createElement, {column, $index}) {/ / build header multiple select box

return createElement(
    "div",
    {
        class:"filters",
        style:{
            //
            padding: "0",
            overflow: "visible"
        }
    },
    [
        column.label,
        createElement(
            "el-popover",
            {
                props:{
                    placement: "bottom",
                    width: "273",
                    trigger: "click",
                    popperClass: "popover-search",
                    value: this.popoverChild
                }
            },
            [
                createElement(
                    "el-select",
                    {
                        class:"filter-select",
                        props:{
                            placeholder: this.placeholder,
                            popperClass: "phase-select",
                            multiple: true,//render
                            value: this.paramChild,
                            clearable: this.isClear,
                        },
                        on:{
                            input: value => {
                                console.log(value)
                                this.paramChild = value
                                this.callback && this.callback()
                            }
                        }
                    },
                    [
                        this.fieldExtra.template.items.map(item => {
                            return createElement(
                                "el-option",
                                {
                                    props:{
                                        value: item.content,
                                        label: item.content
                                    },
                                    key: item.content
                                }
                            )
                        })
                    ]
                ),
                createElement(
                    "a",
                    {
                        domProps:{
                            innerHTML: "",
                        },
                        style:{
                            cursor:"pointer",
                            marginLeft:"5px",
                            color: "-sharp55a3f8",
                        },
                        on:{
                            click: () => {
                                let paramVal = {
                                   field_key: this.prop,
                                   value: this.paramChild,
                                   label: column.label
                                }
                                console.log(paramVal)
                                this.popoverChild = false
                                this.$emit("paramBack", paramVal)
                            }
                        }
                    }
                ),
                createElement(
                    "i",
                    {
                        slot: "reference",
                        class: this.filterIcon,
                        style:{
                            cursor:"pointer",
                            marginLeft:"5px"
                        },
                        on:{
                            click:() => {
                                this.popoverChild = true
                            }
                        }
                    }
                )
            ]
        )
    ]
)

},

/ / here is my reference component

<vue-SearchColumn
v-for="item in projectInvestorHeaderList"
:key="item.field_key"
:prop="item.field_key"
:label="item.field_innername"
:renderType="item.field_type"
:search="item.search"
:fieldExtra="item.field_extra"
:fixed="item.fixed"
:param="item.value"
:width="item.width"
@linkTos="investorRouterTo"
@paramBack="paramBack"></vue-SearchColumn>

now the logic code works, but because multiple function calls cause multiple popover pop-ups, I don"t know how to solve this problem

Apr.28,2021

check whether your el-table-column is v-for loop. If so, several columns call


have you solved the problem


correct answer: https://github.com/ElemeFE/el.

Menu