背景

測試反饋說之前可以輸入的搜索輸入框，現(xiàn)在突然輸入不了文字了。

分析代碼

根據(jù)問題，先看代碼有沒有問題

<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組件內(nèi)置插槽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

發(fā)現(xiàn)可以正常輸入，雖然都是v-model="name", 但是可以發(fā)現(xiàn)表格的輸入框沒有雙向綁定。因此就排除掉是slot的問題了,那么就剩下是el-table-column的問題了。而且這功能是以前開發(fā)的可以輸入，現(xiàn)在不行，應(yīng)該是element-ui升級導(dǎo)致的。于是我安裝了老版本的element-ui，經(jīng)過多次測試還是不行，再次猜測可能是現(xiàn)在vue版本太高了，和element-ui老版本不匹配。放棄測試了。

既然有問題，那就要解決了，方案：

1. 去官方提bug修改，但是時間不等人，這是緊急bug
2. 自己修復(fù)，我一開始直接把表格插槽中el-input 換成普通input，沒問題，就是樣式要重寫一下，這可以解決。
3. 再折騰一下，發(fā)現(xiàn)換個寫法就行了。如下

<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>，改動最小。

結(jié)果

一般人可能會想到第2種，第3種純屬巧合。因為之前我們就遇到vue的2.6.13版本在插槽這塊有另外的bug。

為了避免這種問題，一般項目還是盡量鎖定寫死版本吧。