利用vue实现对表格的增删改查，使得指定删除某一行数据，显示查找的数据等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<title>Table CRUD with Vue</title>
</head>
<body>
<div id="app" class="container mt-5">
<!-- 查询表单 -->
<form>
<div class="mb-3">
<label for="searchQuery" class="form-label">查询关键字</label>
<input type="text" class="form-control" id="searchQuery" v-model="searchQuery" placeholder="请输入查询关键字">
</div>
</form>
<!-- 操作按钮 -->
<div class="mb-3">
<button class="btn btn-primary" @click="addRow">添加</button>
<button class="btn btn-warning" @click="editRow">编辑</button>
<button class="btn btn-danger" @click="deleteRow">删除</button>
<button class="btn btn-secondary" @click="searchData">查询</button>
</div>
<!-- 数据表格 -->
<table class="table table-striped">
<thead>
<tr>
<th scope="col">序号</th>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">性别</th>
<th scope="col">职业</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in filteredData" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>{{ row.gender }}</td>
<td>{{ row.job }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 创建Vue实例
const app = new Vue({
el: '#app',
data: {
// 原始数据数组
dataArray: [
{ name: '张三', age: 25, gender: '男', job: '工程师' },
{ name: '李四', age: 30, gender: '女', job: '教师' },
{ name: '王五', age: 28, gender: '男', job: '设计师' },
{ name: '赵六', age: 35, gender: '女', job: '医生' },
{ name: '孙七', age: 22, gender: '男', job: '程序员' },
{ name: '周八', age: 27, gender: '女', job: '销售' },
{ name: '吴九', age: 32, gender: '男', job: '经理' },
{ name: '郑十', age: 29, gender: '女', job: '会计' },
{ name: '陈十一', age: 24, gender: '男', job: '客服' },
{ name: '林十二', age: 31, gender: '女', job: '文案策划' }
],
// 用于存储搜索关键字
searchQuery: '',
// 用于存储过滤后的数据，初始为原始数据
filteredData: []
},
created() {
// 在组件创建时，初始化过滤后的数据为原始数据
this.filteredData = this.dataArray;
},
methods: {
// 添加行的方法
addRow() {
// 创建一个新的空对象，用于用户输入新数据
const newRow = { name: '', age: '', gender: '', job: '' };
// 将新对象添加到原始数据数组中
this.dataArray.push(newRow);
// 更新过滤后的数据，以便表格能实时显示新添加的数据
this.filteredData = this.dataArray;
},
// 编辑行的方法
editRow() {
// 这里可以添加具体的编辑逻辑，比如弹出模态框让用户修改数据等
// 暂时只做提示
alert('请完善编辑功能，比如弹出模态框进行数据修改');
},
// 删除行的方法
deleteRow() {
// 获取当前选中行的索引（这里假设你已经有某种方式获取到了选中行，比如通过点击行获取索引等，示例中暂未实现）
const selectedIndex = 0; // 这里需要替换为实际获取到的索引
// 根据索引从原始数据数组中删除对应的行
this.dataArray.splice(selectedIndex, 1);
// 更新过滤后的数据
this.filteredData = this.dataArray;
},
// 查询数据的方法
searchData() {
// 根据搜索关键字过滤数据
this.filteredData = this.dataArray.filter(row =>
row.name.includes(this.searchQuery) ||
row.age.includes(this.searchQuery) ||
row.gender.includes(this.searchQuery) ||
row.job.includes(this.searchQuery)
);
}
}
});
</script>
</body>
</html>
