Working with VueJS version 2.6.10 and Element-UI version 2.12.0, I have successfully displayed data inside an el-table component. Everything is going well so far.
I am looking to add input fields in the column headers for filtering the data, but I only want these inputs to be displayed when a button is clicked. To achieve this, I tried using custom headers like below:
<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>
The issue arises when the value of "bool" changes, nothing seems to happen.
Upon further investigation, it appears that the header template is not reactive as expected.
To workaround this issue and toggle the inputs, I had to force the el-table re-render like this:
<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));
}
}
This solution works, however, it's not ideal as it requires re-rendering the entire table which can take some time particularly for larger tables.
You can find the complete example here: https://jsfiddle.net/olivierlevrey/pyvc6kht/2/
If anyone has a more efficient solution to make custom headers reactive, please do share.