原文地址： www.jianshu.com/p/f9ee03084…

背景

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

分析代码

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

<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>

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

一开始怀疑是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>

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

既然有问题，那就要解决了，方案：

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

    <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，并且提了官方也已经修复到2.6.14。

为了避免这种问题，一般项目还是尽量锁定版本吧。但是我们这个项目lerna分包管理的，非常复杂，且由于历史原因没有锁定。最后，有空再去详细看一下<el-table-column>的具体实现吧。