vue实现表单批量更改选中的表格数据

你可以通过使用 Vue.js 的双向绑定和计算属性来实现表单批量更改选中的表格数据。下面是一个简单的示例代码：

首先，你需要在 Vue 实例的 data 中定义一个数组来保存表格数据和选中状态：

data() {
  return {
    tableData: [
      { id: 1, name: 'John', age: 25, selected: false },
      { id: 2, name: 'Jane', age: 30, selected: false },
      { id: 3, name: 'Bob', age: 35, selected: false },
    ],
    selectAll: false,
  };
},

接下来，在表格中使用 `v-model` 指令绑定每一行数据的选中状态：

<table>
  <thead>
    <tr>
      <th>
        <input type="checkbox" v-model="selectAll" @change="selectAllRows">
      </th>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in tableData" :key="row.id">
      <td>
        <input type="checkbox" v-model="row.selected">
      </td>
      <td>{{ row.id }}</td>
      <td>{{ row.name }}</td>
      <td>{{ row.age }}</td>
    </tr>
  </tbody>
</table>

在上面的代码中，我们将全选的状态绑定到 `selectAll` 变量上，并且在全选框的 `change` 事件中调用 `selectAllRows` 方法。

最后，你可以通过计算属性来监听选中状态的变化，实现批量更改选中的表格数据：

computed: {
  selectedRows() {
    return this.tableData.filter(row => row.selected);
  },
},
methods: {
  selectAllRows() {
    this.tableData.forEach(row => {
      row.selected = this.selectAll;
    });
  },
  updateSelectedRows() {
    // 批量更新选中的表格数据
    this.selectedRows.forEach(row => {
      // 执行你的更新操作，例如更新数据到后端服务器
    });
  },
},

通过 `selectedRows` 计算属性，你可以获取到所有选中的行数据。在 `updateSelectedRows` 方法中，你可以执行相应的更新操作，例如将选中的数据发送到后端服务器进行批量更新。

希望这个示例对你有帮助！