el-table 自定義表頭輸入框異常

先說答案:slot-scope="scope" 必須寫,不然出問題。

問題是在這樣的,我在ElementUI官網查閱表格資料的時候,看到表格的表頭可以自定義,於是我就想和官網一樣,在操作欄添加一個搜索的輸入框,用來搜索表中的內容。

下面是官網的例子:

image-20201028182918534

然後我就把示例代碼搬了過去,因爲搜索的時候用不到 slot-scope="scope",編輯器一直提示紅色下劃線錯誤,所以我就把它刪掉了。

<el-table-column label="操作" width="200" fixed="right" align="center">
    <template slot="header">
        <el-input v-model="keyword" clearable size="mini" placeholder="輸入文件名進行搜索" />
    </template>
</el-table-column>

然後詭異的事情就出現了:輸入框正常顯示,默認值正常綁定,輸入框輸入無反應,綁定的keyword變量只會接收到最後一個按鍵輸入的字符,但是輸入框又不回顯。

然後經過一次次的調試,最終找到了問題slot-scope="scope"不能刪除,我又加了回去,好了正常了。

<el-table-column label="操作" width="200" fixed="right" align="center">
    <template slot="header" slot-scope="scope">
        <el-input v-model="keyword" clearable size="mini" placeholder="輸入文件名進行搜索" />
    </template>
</el-table-column>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章