I was confused about how the row parameter in the method clickToSelect(row) gets passed, since the template didn’t explicitly do this:
@row-click="clickToSelect" <!-- No (row) passed manually -->
Vue automatically passes the appropriate arguments to the handler when using @event="methodName"
. In the case of Element Plus’s @row-click
, it passes (row, column, event)
. So there’s no need to manually specify the parameters unless I want to customize them.
I originally wrote:
<el-table row-key="id"> <!-- ❌ Wrong casing -->
My data objects use ID
(uppercase), not id
. The row-key
must exactly match the property name used to uniquely identify rows.
Without a proper row-key, Element Plus can’t uniquely track each row, which may result in unexpected behavior like selecting all rows on click.