背景
測(cè)試反饋說之前可以輸入的搜索輸入框蛹疯，現(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的問題蔗彤，于是我自己寫了個(gè)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升級(jí)導(dǎo)致的待侵。于是我安裝了老版本的element-ui丢早，經(jīng)過多次測(cè)試還是不行，再次猜測(cè)可能是現(xiàn)在vue版本太高了秧倾，和element-ui老版本不匹配怨酝。放棄測(cè)試了。
既然有問題那先，那就要解決了农猬，方案：
- 去官方提bug修改，但是時(shí)間不等人售淡，這是緊急bug
- 自己修復(fù)斤葱，我一開始直接把表格插槽中el-input 換成普通input，沒問題揖闸，就是樣式要重寫一下揍堕，這可以解決。
- 再折騰一下楔壤，發(fā)現(xiàn)換個(gè)寫法就行了鹤啡。如下
<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>，改動(dòng)最小蹲嚣。
結(jié)果
一般人可能會(huì)想到第2種递瑰，第3種純屬巧合祟牲。因?yàn)橹拔覀兙陀龅絭ue的2.6.13版本在插槽這塊有另外的bug。
為了避免這種問題抖部，一般項(xiàng)目還是盡量鎖定寫死版本吧说贝。
