獲取當前點擊的行號是Vue中常見的需求,下面我們來介紹一種簡單的方法。
我們首先需要在表格中給每一行添加一個點擊事件,如下:
<table>
<tbody>
<tr v-for="(row, index) in rows" @click="getRow(index)">
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
</tr>
</tbody>
</table>
這里我們使用了Vue的指令v-for對表格進行渲染,同時給每一行添加了@click事件,當用戶點擊某一行時,會調用getRow方法。
接下來我們來看一下getRow方法的實現:
methods: {
getRow(index) {
console.log(index)
}
}
這里我們定義了一個名為getRow的方法,當用戶點擊行時,就會調用該方法并將當前行的索引值index作為參數傳入,我們在控制臺中輸出index,即可獲取當前點擊的行號。