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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM