<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生管理系统</title>
<script src="/
js/vue-2.6.12.
js"></script>
</head>
<body>
<div id="app">
<button @click="showAddForm">
添加学生</button>
<table border="1">
<tr>
<th><input type="checkbox" @click="selectAll" v-model="ischeck">全选</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>操作</th>
</tr>
<tr v-for="(item, index) in students" :key="index" v-show="!item.isfliter">
<td><input type="checkbox" :value="index" v-model="
checkboxlist" @click="updateSelectStatus"></td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.score}}</td>
<td>
<button @click="deleteStudent(index)">删除</button>
<button @click="editStudent(index)">修改</button>
</td>
</tr>
</table>
<!-- 统一的表单，根据isNew属性区分
添加和修改 -->
<form v-show="showForm">
姓名：<input type="text" v-model="tempStudent.name" ><
br>
年龄：<input type="text" v-model="tempStudent.age"><
br>
性别：<select v-model="tempStudent.sex">
<option value="男">男</option>
<option value="女">女</option>
</select><
br>
成绩：<input type="text" v-model="tempStudent.score"><
br>
<button @click="saveStudent">保存</button>
<button @click="cancelForm">取消</button>
</form>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
showForm: false,
isNew: true,
currentIndex: -1,
ischeck: false,
checkboxlist: [],
tempStudent: { name: '', age: '', sex: '男', score: '', isfliter: false },
students: [
{ name: '张三', age: 18, sex: '男', score: 90, isfliter: false },
{ name: '李四', age: 19, sex: '女', score: 99, isfliter: false },
{ name: '王五', age: 20, sex: '男', score: 43, isfliter: false },
{ name: '赵六', age: 21, sex: '女', score: 84, isfliter: false },
{ name: '孙七', age: 22, sex: '男', score: 50, isfliter: false }
],
},
methods: {
// 显示
添加表单
showAddForm() {
this.isNew = true;
this.currentIndex = -1;
this.tempStudent = { name: '', age: '', sex: '男', score: '', isfliter: false };
this.showForm = true;
},
// 编辑学生信息
editStudent(index) {
this.isNew = false;
this.currentIndex = index;
// 使用对象展开操作符创建副本，避免直接修改原数据
this.tempStudent = {...this.students[index]};
this.showForm = true;
},
// 保存学生信息（
添加或修改）
saveStudent() {
if (this.isNew) {
//
添加新学生
this.students.push({...this.tempStudent});
} else {
// 更新现有学生
this.students[this.currentIndex] = {...this.tempStudent};
}
this.showForm = false;
},
// 取消表单操作
cancelForm() {
this.showForm = false;
},
// 删除学生
deleteStudent(index) {
if (confirm('确定要删除这名学生吗？')) {
this.students.splice(index, 1);
// 更新复选框状态
this.updateSelectStatus();
}
},
// 全选/取消全选
selectAll() {
if (this.ischeck) {
this.
checkboxlist = this.students.map((_, index) => index);
} else {
this.
checkboxlist = [];
}
},
// 更新全选状态
updateSelectStatus() {
this.ischeck = this.
checkboxlist.length === this.students.length;
}
}
});
</script>
</body>
</
html>上述在修改时存在什么问题，应该该怎么解决
扫一扫
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
