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/