el-table 中的自定义列标题不响应

Question

我正在使用 vuejs 2.6.10 和 element-ui 2.12.0 并在 el-table 中显示数据。到目前为止一切顺利。

在列标题中，我想显示输入字段以过滤数据，但我只想按需显示这些输入（单击按钮时）。所以我想使用这样的自定义标题：

<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>

问题来了：当 bool 的值发生变化时，什么也没有发生。

经过几次测试，我意识到标题模板似乎没有反应。

我找到了一种解决方法来切换我的输入：强制 el-table 重新渲染...

<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));
    }
}

它有效。但这根本不干净，重新渲染一个不太大的表需要一些时间......

这里是完整的例子：https://jsfiddle.net/olivierlevrey/pyvc6kht/2/

有没有更好的解决方案来使自定义标头具有响应性？

Answer 1

您的模板似乎无法识别范围。添加slot-scope 可以解决您的问题。

https://jsfiddle.net/cz8tm9bd/