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