vue3前端点击删除按钮删除当前行

好的，如果你使用Vue 3来实现前端页面，可以使用Vue提供的响应式数据和指令来实现删除功能。具体实现方式如下：

1. 定义一个数组，用来存储表格每一行的数据，例如：

data() {
  return {
    tableData: [
      { id: 1, name: '张三', age: 18 },
      { id: 2, name: '李四', age: 20 },
      { id: 3, name: '王五', age: 22 },
    ]
  }
}

2. 在模板中使用`v-for`指令渲染表格，并为删除按钮绑定点击事件，并将当前行的索引作为参数传递给事件处理函数，例如：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in tableData" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td><button @click="deleteRow(index)">删除</button></td>
    </tr>
  </tbody>
</table>

在这个例子中，我们使用了`v-for`指令来循环渲染表格数据，使用`:key`指令为每一行指定一个唯一的key值，提高渲染性能。在删除按钮上使用了`@click`指令绑定了一个点击事件监听器，并将当前行的索引作为参数传递给事件处理函数。

3. 在Vue实例中定义一个`deleteRow`方法，用来删除当前行的数据，例如：

methods: {
  deleteRow(index) {
    this.tableData.splice(index, 1);
  }
}

在这个例子中，我们使用了`splice`方法从数组中删除指定索引位置的元素，实现了删除当前行的功能。