526互联

elementUi table表格 标头自定义，给表头加点击事件

发布时间 2023-08-14 18:23:31作者: LALAYU
<el-table-column label="">
    <el-table-column prop="column" :render-header="renderHeader" width="160">
        <template slot-scope="scope">
            <span>{{ scope.row.column[0] / multiple }}</span>
            <span v-if="scope.row.column[1] != 0"> - {{ scope.row.column[1] / multiple }}</span>
            <span v-else>+</span>
        </template>
    </el-table-column>
</el-table-column>

:render-header="renderHeader"

renderHeader() {
            return (
                <el-popover
                    placement="top-start"
                    width="200"
                    trigger="hover">
                    <a class='filterHeader' on-click={() => this.detailSelected('合同金额区间(万)', 10000)}> 合同金额区间(万)</a>
                    <a class='filterHeader' on-click={() => this.detailSelected('合同金额区间(十万)', 100000)}>合同金额区间(十万)</a>
                    <a class='filterHeader' on-click={() => this.detailSelected('合同金额区间(百万)', 1000000)}> 合同金额区间(百万)</a>
                    <el-button slot="reference">{this.optionHeader}</el-button>
                </el-popover>
            );
        },