CODEWITHSUNDEEP
javascriptvue.jselement-ui
Olivier Levrey
Olivier Levrey

Reputation: 115

Custom column header in el-table not 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 comes 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.net/olivierlevrey/pyvc6kht/2/

Has someone a better solution to make custom headers reactive?

Upvotes: 3

Views: 6787

Answers (1)

Gowthaman
Gowthaman

Reputation: 1282

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

https://jsfiddle.net/cz8tm9bd/

Upvotes: 5

Related Questions