vue3+typescript 表格增删改查

下面是一个简单的示例，演示如何使用 Vue3 和 TypeScript 实现表格的增删改查功能：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <button @click="edit(index)">编辑</button>
            <button @click="remove(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <input v-model="form.name" type="text" placeholder="姓名" />
      <input v-model="form.age" type="text" placeholder="年龄" />
      <button @click="save">保存</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface DataItem {
  name: string;
  age: string;
}

export default defineComponent({
  data() {
    return {
      form: {
        name: '',
        age: '',
      },
      dataList: [] as DataItem[],
      editIndex: -1,
    };
  },
  methods: {
    save() {
      if (this.editIndex === -1) {
        this.dataList.push(this.form);
      } else {
        this.dataList.splice(this.editIndex, 1, this.form);
        this.editIndex = -1;
      }
      this.form = {
        name: '',
        age: '',
      };
    },
    edit(index: number) {
      this.form = { ...this.dataList[index] };
      this.editIndex = index;
    },
    remove(index: number) {
      this.dataList.splice(index, 1);
    },
  },
});
</script>

在上面的代码中，我们使用了 `interface` 定义了一个 `DataItem` 的数据类型，它包括了 `name` 和 `age` 两个字段。然后在 `data` 函数中，我们定义了 `form`、`dataList` 和 `editIndex` 三个变量，分别表示表单数据、数据列表和编辑行的索引。

接着，在 `methods` 中，我们定义了三个方法：`save`、`edit` 和 `remove`。其中，`save` 方法用于保存表单数据并将其添加到数据列表中或者更新数据列表中的某一项；`edit` 方法用于编辑某一行的数据；`remove` 方法用于删除某一行的数据。

最后，在模板中，我们使用了 `v-for` 指令遍历数据列表，并使用 `v-model` 指令绑定表单数据。同时，我们使用了 `@click` 指令绑定了 `save`、`edit` 和 `remove` 方法。

需要注意的是，上面的示例只是一个最基本的实现，还有很多细节和优化可以进行，例如表单验证、分页、搜索等等。