背景
测试反馈说之前可以输入的搜索输入框，现在突然输入不了文字了。
分析代码
根据问题，先看代码有没有问题
<template>
<el-table :data="[]">
<el-table-column>
<template slot="header">
<h1> 表格头部: template slot="header" </h1>
<el-input v-model="name"></el-input>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "App",
data() {
return {
name: "",
};
},
};
</script>
image.png
看不出什么问题，但是el-input就是输入不了文字，vue 与element-ui安装的版本分别是2.6.14 与 2.15.3
image.png
一开始怀疑是slot的问题，于是我自己写了个helloword组件内置插槽header,然后再引入使用
<!--helloword.vue-->
<div class="hello">
<slot name='header' />
</div>
<!--App.vue-->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<el-table :data="[]">
<el-table-column>
<template slot="header">
<h1> 表格头部: template slot="header" </h1>
<el-input v-model="name"></el-input>
</template>
</el-table-column>
</el-table>
<br>
<br>
<br>
<hello-world>
<template slot="header">
<h1 style="text-aligh: center;">helloworld 头部： template solt="header" </h1>
<el-input v-model="name"></el-input>
</template>
</hello-world>
</div>
</template>
image.png
发现可以正常输入，虽然都是v-model="name", 但是可以发现表格的输入框没有双向绑定。因此就排除掉是slot的问题了,那么就剩下是el-table-column的问题了。而且这功能是以前开发的可以输入，现在不行，应该是element-ui升级导致的。于是我安装了老版本的element-ui，经过多次测试还是不行，再次猜测可能是现在vue版本太高了，和element-ui老版本不匹配。放弃测试了。
既然有问题，那就要解决了，方案：
- 去官方提bug修改，但是时间不等人，这是紧急bug
- 自己修复，我一开始直接把表格插槽中el-input 换成普通input，没问题，就是样式要重写一下，这可以解决。
- 再折腾一下，发现换个写法就行了。如下
<el-table :data="[]">
<el-table-column>
<template #header>
<h1>表格头部: template #header</h1>
<el-input v-model="name"></el-input>
</template>
</el-table-column>
</el-table>
把<template slot="header">换成<template #header>，改动最小。
结果
一般人可能会想到第2种，第3种纯属巧合。因为之前我们就遇到vue的2.6.13版本在插槽这块有另外的bug。
为了避免这种问题，一般项目还是尽量锁定写死版本吧。
