I am using vuejs 2.6.10 and element-ui 2.12.0 and displaying data inside an el-table. So far so good.

In the column headers, I would like to display input fields to filter the data but I want to display these inputs only on demand (upon clicking a button). So I wanted to use custom headers like this:

<el-table-column prop="name" label="Name" width="180">
    <template slot="header">
        Name <br/>
        <!-- show input only on demand -->
        <el-input v-show="bool"></el-input>
    </template>
</el-table-column>

And here es the problem: nothing happens when the value of bool changes.

After a few testing I realized that the header template doesn't seem to be reactive.

I've found a workaround to toggle my inputs: forcing the el-table to re-render...

<el-table v-if="showTable" ...>

methods: {
    toggleInputs() {
        // toggle bool
        this.bool = !this.bool;

        // force re-render table...
        this.showTable = false;
        this.$nextTick(() => (this.showTable = true));
    }
}

It works. But this is not clean at all and it takes some time to re-render a not-so large table...

Here is the full example: /

Has someone a better solution to make custom headers reactive?

I am using vuejs 2.6.10 and element-ui 2.12.0 and displaying data inside an el-table. So far so good.

In the column headers, I would like to display input fields to filter the data but I want to display these inputs only on demand (upon clicking a button). So I wanted to use custom headers like this:

<el-table-column prop="name" label="Name" width="180">
    <template slot="header">
        Name <br/>
        <!-- show input only on demand -->
        <el-input v-show="bool"></el-input>
    </template>
</el-table-column>

And here es the problem: nothing happens when the value of bool changes.

After a few testing I realized that the header template doesn't seem to be reactive.

I've found a workaround to toggle my inputs: forcing the el-table to re-render...

<el-table v-if="showTable" ...>

methods: {
    toggleInputs() {
        // toggle bool
        this.bool = !this.bool;

        // force re-render table...
        this.showTable = false;
        this.$nextTick(() => (this.showTable = true));
    }
}

It works. But this is not clean at all and it takes some time to re-render a not-so large table...

Here is the full example: https://jsfiddle/olivierlevrey/pyvc6kht/2/

Has someone a better solution to make custom headers reactive?

• javascript
• vue.js
• element-ui

Share Improve this question Follow edited Sep 11, 2019 at 13:16 41 72 6c 1,78066 gold badges2222 silver badges3636 bronze badges asked Sep 11, 2019 at 12:57 Olivier LevreyOlivier Levrey 11511 silver badge1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Looks like your template is not recognizing the scope. Adding slot-scope solves your problem.

https://jsfiddle/cz8tm9bd/