vue3+ts表单修改多条数据

在Vue 3和TypeScript中，可以通过表单来修改多条数据。下面是一个示例，展示如何使用表单同时修改多条数据：

首先，在Vue组件中定义一个数据对象，用来保存多条数据的表单值：

<template>
  <form @submit="handleSubmit">
    <div v-for="item in items" :key="item.id">
      <input v-model="formValues[item.id].name" type="text" />
      <input v-model="formValues[item.id].age" type="number" />
    </div>
    <button type="submit">保存</button>
  </form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

interface Item {
  id: number;
  name: string;
  age: number;
}

const items: Item[] = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  // ...
];

const formValues = reactive<{ [key: number]: Item }>({});
items.forEach((item) => {
  formValues[item.id] = { ...item };
});

function handleSubmit() {
  // 处理表单提交逻辑
  // 可以在这里将修改后的数据发送给后端进行保存
  console.log(Object.values(formValues));
}
</script>

在上述代码中，我们使用了Vue的Composition API来定义响应式的数据对象。`formValues`对象用于保存多条数据的表单值，以每个数据项的id作为键。

在模板中使用`v-for`指令遍历`items`数组，并使用`v-model`指令绑定输入框的值到`formValues`对象上。这样，当用户输入内容时，`formValues`中对应数据项的值会自动更新。

在提交表单时，可以通过`Object.values(formValues)`获取到修改后的数据数组，并进行进一步的处理，例如将数据发送给后端进行保存。

请注意，上述代码使用了Vue 3的新特性 `<script setup>`，可以更简洁地编写组件逻辑。如果你选择使用Options API，可以将相关逻辑放在`data`、`methods`等选项中。

这只是一个简单的示例，你可以根据实际业务需求进行修改和扩展，例如添加校验、数据同步等逻辑。