項目場景:
Element-UI的el-table組件row-key使用問題
同一個頁面使用了幾個table,這幾個table都使用了多選,row-key屬性,其中row-key的綁定方式都是用的靜態綁定,row-key=“username”或row-key=“id”,可正常使用,后來升級了node、vue、element-ui plus版本等。。
問題描述
版本升級后出現了勾選table時,默認全部勾選了
因為該頁面有好幾個table,只有一個table出現了勾選一個全都勾選上了,寫法都一致(都是靜態綁定)但有的會有問題。
原因分析:
分析靜態綁定的屬性可能與prop有關聯,綁定未生效的屬性沒有被prop展示:
就是說可正常勾選的表格,在使用row-key=“username”靜態綁定的屬性,在表格中有使用prop展示username字段,而勾選異常的表格,屬性row-key=“id”沒有使用prop展示id字段。
不同版本的 Element UI 對 row-key 的容錯處理可能不同,低版本可能直接報錯,高版本可能靜默失敗。
解決方案:
使用動態綁定:row-key=“id”:
使用動態綁定時:row-key=“id”,可以正常勾選。
結論
當表格中沒有使用prop展示某個字段,但還需要綁定該字段到row-key上時,使用動態綁定。