安装Vue CLI来创建一个Vue3项目。在命令行中运行以下命令来全局安装Vue CLI：
npm install -g @vue/cli
创建一个新的Vue3项目：
vue create table-app
选择默认配置并等待项目创建完成。进入项目目录：
cd table-app
安装axios来进行接口调用：
npm install axios
创建一个名为Table.vue的组件来实现二维表格的增删改查功能。在src/components目录下创建Table.vue文件，并添加以下代码：
<template>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @="editItem(item)">Edit</button>
<button @click="deleteItem(item.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
<form @submit.prevent="addItem">
<input type="text" v-model="newItem.name" placeholder="Name" required>
<input type="number" v-model="newItem.age" placeholder="Age" required>
<button type="submit">Add</button>
</form>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
interface Item {
id: number;
name: string;
age: number;
}
export default defineComponent({
name: 'Table',
data() {
return {
items: [] as Item[],
newItem: {} as Item,
};
},
mounted() {
this.fetchItems();
},
methods: {
fetchItems() {
axios.get('/api/items').then(response => {
this.items = response.data;
}).catch(error => {
console.error(error);
});
},
addItem() {
axios.post('/api/items', this.newItem).then(() => {
this.newItem = {} as Item;
this.fetchItems();
}).catch(error => {
console.error(error);
});
},
editItem(item: Item) {
// Implement edit logic here
},
deleteItem(itemId: number) {
axios.delete(`/api/items/${itemId}`).then(() => {
this.fetchItems();
}).catch(error => {
console.error(error);
});
},
},
});
</script>
这个组件定义了一个二维表格，使用v-for指令来循环渲染每一行数据，并提供了添加、编辑和删除功能。其中fetchItems方法通过调用接口来获取数据，addItem方法通过调用接口来添加数据，editItem和deleteItem方法分别用于编辑和删除数据。
在App.vue中使用Table组件：
<template>
<div id="app">
<Table />
</div>
</>
<script lang="ts">
import { defineComponent } from 'vue';
import Table from './components/Table.vue';
export default defineComponent({
name: 'App',
components: {
Table,
},
});
</script>
最后运行项目：
npm run serve
