vue3点击多选框获取行数据

在 Vue 3 中，如果你想要通过点击多选框来获取相应的行数据，通常会结合 `v-model` 和数组操作来实现。假设你有一个表格组件，每个表行都有一个 `selected` 的布尔属性表示是否被选中，可以按照以下步骤：

1. 首先，在表格的数据（比如 `items`）中为每一项添加一个默认值为 `false` 的 `selected` 属性，例如：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', selected: false },
      { id: 2, name: 'Item 2', selected: false },
      // ...
    ]
  };
}

2. 使用模板绑定（`<template>`）中的多选框组件，并将 `selected` 属性作为 `v-model` 绑定：

<tr v-for="(item, index) in items" :key="index">
  <td>
    <input type="checkbox" :value="item.id" v-model="item.selected">
  </td>
  <!-- 其他列内容... -->
</tr>

这里的 `:value="item.id"` 表示当多选框被选中时，对应的值就是该行的 `id`。

3. 当用户点击多选框时，`item.selected` 的变化会影响到 `items` 数组中对应元素的 `selected` 状态。你可以监听 `items` 数组的变化来获取被选中的行数据：

watch: {
  items(newItems) {
    const selectedItems = newItems.filter(item => item.selected);
    console.log('Selected items:', selectedItems); // 获取被选中的行数据
  }
},

在这个例子中，每当 `items` 数组更新时（即多选框状态改变），`selectedItems` 就会得到当前被选中的所有对象。