el-table 中的自定义列 header 没有反应

Question

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

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

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

有效。但这一点都不干净， re-render 一个 not-so 大 table...

需要一些时间

完整示例如下：https://jsfiddle.net/olivierlevrey/pyvc6kht/2/

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

Answer 1

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

https://jsfiddle.net/cz8tm9bd/

el-table 中的自定义列 header 没有反应

Custom column header in el-table not reactive

javascript

vue.js

element-ui