The rendering function is used in elementUI, but it hasn't been solved for several days.

question: in the vue+elementui table component, use the render function to render the Label area of the column header (using the render-header method). The requirement is to click the search icon, to appear the search popover pop-up box of input or select. Now the problem is that when there is a select multi-selection drop-down (multiple = true), or a fixed column (with fixed attribute), the render function of each column will be called again. That is, when I click on the search box, there will be multiple identical popover pop-up layers

Code
< el-row class= "table-area table-row" >

<el-table
ref="projectInternalTable"
:data="projectInternalContentList"
style="100%"
@cell-mouse-enter="operateIconShow"
@cell-mouse-leave="operateIconHide"
@select="selectCheckboxEvent"
@select-all="selectCheckboxAllEvent">
    <el-table-column
    type="selection"
    fixed></el-table-column>
    <vue-SearchColumn
    v-for="(item,index) in projectInternalHeaderList"
    :key="index"
    :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="projectInternalRouterTo"
    @paramBack="paramBack"></vue-SearchColumn>
</el-table>

< / el-row >


< template >

in

component

<el-table-column
:width="width"
:prop="propChild"
:label="label"
:editable="editable"
:render-header="renderHeader"// 
:fixed="fixed"// fixedtrue
:search="search"
:popover="popoverChild"
:fieldExtra="fieldExtra"
:param="paramChild"
:callback="callback">
</el-table-column>

< / template >
< script >

export default{
    renderHeader(createElement, {column,$index}){//html
            if(this.search === true){
                if(this.renderType === 3 || this.renderType === 7){
                    return this.renderInput(createElement,{column,$index})
                }
                else if(this.renderType === 4){
                    return this.renderRadioSelect(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
            }
        },
   renderInput(createElement,{column, $index}){...},
   renderRadioSelect(createElement,{column, $index}){...},
   renderCheckboxSelect(createElement,{column, $index}){//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,//true
                                        value: this.paramChild,
                                        clearable: this.isClear,
                                    },
                                    on:{
                                        input: value => {
                                            console.log(value)
                                            this.paramChild = value
                                            this.callback && this.callback()
                                        }
                                    }
                                },
}

< / script >

which god can help me answer how to solve this problem

May.23,2021
Menu