Vue.js -如何通过正文中的删除按钮删除选中的行？

data() {
  return {
    rows: [
      { id: 1, name: '行1' },
      { id: 2, name: '行2' },
      { id: 3, name: '行3' }
    ],
    selectedRows: [] // 用于存储选中的行
  }
}

<table>
  <tr v-for="row in rows" :key="row.id">
    <td><input type="checkbox" v-model="selectedRows" :value="row"></td>
    <td>{{ row.name }}</td>
  </tr>
</table>
<button @click="deleteSelectedRows">删除选中的行</button>

methods: {
  deleteSelectedRows() {
    this.selectedRows.forEach(row => {
      const index = this.rows.indexOf(row);
      if (index > -1) {
        this.rows.splice(index, 1);
      }
    });
    this.selectedRows = []; // 清空选中的行
  }
}