问题: 再使用vue+elementui table组件中,通过render函数去对 列标题 Label 区域渲染(使用了render-header方法),需求是点击搜索icon,出现input或者select的搜索popover弹出框,现在问题是当存在select多选下拉(multiple = true)时,或者固定列(有fixed属性时),每一列的render函数会多调用一次,也就是当我点击搜索框时会出现多个相同popover弹出层
代码
<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>
<el-table-column
:width="width"
:prop="propChild"
:label="label"
:editable="editable"
:render-header="renderHeader"// 这里调用函数
:fixed="fixed"// fixed为true函数多调用一次
: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>
哪位大神帮忙解答一下,该如何解决这个问题