我正在使用 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>
问题来了：当布尔值发生变化时，什么都不会发生。
经过几次测试，我意识到标题模板似乎不是反应式的。
我找到了一种切换输入的解决方法：强制 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/
是否有更好的解决方案可以使自定义标头具有响应性？
看起来您的模板无法识别范围。添加slot-scope可以解决您的问题。
https://jsfiddle.net/cz8tm9bd/