Vue.js 是一款非常流行的 JavaScript 框架,用來快速開發單頁面應用程序。在開發過程中,經常會需要獲取表格行號。本文將介紹如何在 Vue.js 中獲取表格行號。
首先,我們需要創建一個簡單的表格組件。
<template> <table> <thead> <tr> <th>Name</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr v-for="(row, index) in rows" :key="index" @click="getRowNumber(index)"> <td>{{ row.name }}</td> <td>{{ row.email }}</td> <td> <button @click="editRow(index)">Edit</button> <button @click="deleteRow(index)">Delete</button> </td> </tr> </tbody> </table> </template> <script> export default { data() { return { rows: [ { name: 'John', email: 'john@example.com' }, { name: 'Jane', email: 'jane@example.com' }, { name: 'Bob', email: 'bob@example.com' }, ], selectedRow: null, }; }, methods: { getRowNumber(index) { this.selectedRow = index; }, editRow(index) { // Code to edit row }, deleteRow(index) { // Code to delete row }, }, }; </script>
在上述示例代碼中,我們通過 v-for 指令使表格行數據動態生成。每一行的key為其index。并且我們通過click事件監聽每一行的點擊,通過getRowNumber方法獲得被點擊的行的index。賦值給selectedRow。這樣我們就可以很方便的獲取表格行號并進行下一步處理。