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.