javascript - el-table 中的自定义列标题没有反应

Question

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

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

<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 的值改变时没有任何反应。

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

我找到了一种切换输入的解决方法:强制 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/

有人有更好的解决方案来使自定义 header 具有反应性吗？

Answer 1

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

https://jsfiddle.net/cz8tm9bd/