鍍金池/ 問答/HTML/ elementui中的el-table組件使用了render-header方法,

elementui中的el-table組件使用了render-header方法,但是綁定后會(huì)執(zhí)行多次,不知道什么原因

并沒有多次調(diào)用,有人遇到過這種情況嘛?

components 組件
<el-table-column
:width="width"
:prop="propChild"
:label="label"
:editable="editable"
:render-header="renderHeader"
:fixed="fixed"http://該屬性會(huì)使renderHeader函數(shù)多調(diào)用一次
:search="search"
:popover="popoverChild"
:fieldExtra="fieldExtra"
:param="paramChild"
:callback="callback">
</el-table-column>

renderHeader(createElement, {column,$index}){//這里是根據(jù)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}){//構(gòu)建頭部多選select框

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函數(shù)會(huì)多調(diào)用一次
                            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: '#55a3f8',
                        },
                        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
                            }
                        }
                    }
                )
            ]
        )
    ]
)

},

//這里是我引用組件

<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>

現(xiàn)在是邏輯代碼走通了,但是因?yàn)楹瘮?shù)調(diào)用多次使得popover彈出框 彈出多個(gè),現(xiàn)在不知道如何解決這個(gè)問題

回答
編輯回答
你好胸

查看下你的 el-table-column是不是 v-for循環(huán)了,如果是的話, 有幾列調(diào)用幾次

2017年5月18日 16:32