利用vue+html使得对数据进行修改、添加、删除、查找等
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Table CRUD</title>
<style>
table{
border: 1px solid blue;
width: 500px;
text-align:center;
}
td{
border: 1px solid blue;
}
</style>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h2>表格数据增删改查</h2>
<input type="text" v-model="searchQuery" placeholder="输入名称进行查询">
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filteredTableData" :key="item.id">
<td>{{ item.id }}</td>
<td v-if="!editingItem || editingItem.id!== item.id">{{ item.name }}</td>
<td>{{ item.sex }}</td>
<td>{{ item.age }}</td>
<td>{{ item.class }}</td>
<td>{{ item.school }}</td>
<td v-if="editingItem && editingItem.id === item.id">
<input type="text" v-model="editingItem.name">
</td>
<td>
<button v-if="!editingItem || editingItem.id!== item.id" @click="editItem(item)">编辑</button>
<button v-if="editingItem && editingItem.id === item.id" @click="saveEdit(item.id)">保存</button>
<button @click="deleteItem(item.id)">删除</button>
</td>
</tr>
</tbody>
</table>
<div>
<input type="text" v-model="newItem.name" placeholder="输入姓名">
<button @click="addItem">添加</button>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
tableData: [
{id:'1',name:'tom',sex:'男',age:'19',class:'B2306',school:'xx'},
{id:'2',name:'Amy',sex:'女',age:'17',class:'B2317',school:'xx'},
{id:'3',name:'小红',sex:'女',age:'18',class:'B2318',school:'xx'},
{id:'4',name:'小强',sex:'男',age:'19',class:'B2315',school:'xx'},
{id:'5',name:'小亮',sex:'男',age:'18',class:'B2313',school:'xx'},
{id:'6',name:'大明',sex:'女',age:'19',class:'B2315',school:'xx'},
{id:'7',name:'玲玲',sex:'男',age:'19',class:'B2319',school:'xx'},
{id:'8',name:'小芳',sex:'女',age:'17',class:'B2311',school:'xx'},
{id:'9',name:'sam',sex:'男',age:'19',class:'B2313',school:'xx'},
{id:'10',name:'jack',sex:'男',age:'19',class:'B2306',school:'xx'},],
newItem: { id: null, name: '' },
editingItem: null,
searchQuery: ''
};
},
computed: {
filteredTableData() {
return this.tableData.filter(item => item.name.includes(this.searchQuery));
}
},
methods: {
addItem() {
if (this.newItem.name.trim()!== '') {
const newId = this.tableData.length > 0? this.tableData[this.tableData.length - 1].id + 1 : 1;
this.tableData.push({ id: newId, name: this.newItem.name });
this.newItem.name = '';
}
},
deleteItem(id) {
this.tableData = this.tableData.filter(item => item.id!== id);
},
editItem(item) {
this.editingItem = {...item };
},
saveEdit(id) {
if (this.editingItem) {
const index = this.tableData.findIndex(item => item.id === id);
if (index!== -1) {
this.tableData[index].name = this.editingItem.name;
this.editingItem = null;
}
}
}
}
});
app.mount('#app');
</script>
</body>
</html>
```
