elementUI 中使用渲染函数,改了好几天没解决

新手上路,请多包涵

问题: 再使用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>

哪位大神帮忙解答一下,该如何解决这个问题

阅读 3.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题