发现el-input在el-table-column slot="header"中输入不了的bug

背景

测试反馈说之前可以输入的搜索输入框,现在突然输入不了文字了。

分析代码

根据问题,先看代码有没有问题



image.png

看不出什么问题,但是el-input就是输入不了文字,vue 与element-ui安装的版本分别是2.6.14 与 2.15.3


image.png

一开始怀疑是slot的问题,于是我自己写了个helloword组件内置插槽header,然后再引入使用


 
image.png

发现可以正常输入,虽然都是v-model="name", 但是可以发现表格的输入框没有双向绑定。因此就排除掉是slot的问题了,那么就剩下是el-table-column的问题了。而且这功能是以前开发的可以输入,现在不行,应该是element-ui升级导致的。于是我安装了老版本的element-ui,经过多次测试还是不行,再次猜测可能是现在vue版本太高了,和element-ui老版本不匹配。放弃测试了。

既然有问题,那就要解决了,方案:

  1. 去官方提bug修改,但是时间不等人,这是紧急bug
  2. 自己修复,我一开始直接把表格插槽中el-input 换成普通input,没问题,就是样式要重写一下,这可以解决。
  3. 再折腾一下,发现换个写法就行了。如下