一、案例需求
- 需求1: 铺设页面，准备初始的数据(自己手写数据结构)
- 需求2: 当输入框没有值, 要给用户一个提示，必须都有值才能增加新数据 (数据驱动页面哦)
- 需求3: 添加功能： 想好数据结构统一对象的key
- 需求4: 点击编辑功能，回填数据到输入框上(不要操作dom, 数据驱动页面)
- 需求5: 用户修改后，点击相同按钮，判断是添加还是修改的功能，实现编辑后更新页面效果
- 需求6: 点击删除, 删除这行数据
二、案例效果图
三、实现代码
<template>
<div id="container">
<div>
<span>姓名:</span>
<input v-model.trim="name" type="text" />
</div>
<div>
<span>年龄:</span>
<input v-model.number="age" type="number" />
</div>
<div>
<span>性别:</span>
<select v-model="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<button @click="stdHandler">
添加/修改
</button>
</div>
<div>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="(item, i) in stdList" :key="item.id">
<td>{{ i + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.sex }}</td>
<td>
<button @click="delStdBtn(item.id)">删除</button>
<button @click="editStdBtn(i)">编辑</button>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stdList: [
{
id: 10000,
name: "Tom",
age: 19,
sex: "男",
},
{
id: 10001,
name: "Jone",
age: 23,
sex: "女",
},
{
id: 10002,
name: "Tabo",
age: 26,
sex: "女",
},
],
name: "",
age: "",
sex: "男",
selectIndex: null, // 选中数据的下标
flag: true, // 用于判断添加按钮还是修改按钮
};
},
methods: {
// 添加/修改学生信息功能
stdHandler() {
// 判断输入框内是否都有值
if (!this.name || !this.age || !this.sex) {
return alert("请填写完整数据!");
}
if (this.flag) { // flag为true, 添加功能
const id = this.stdList.length !== 0 ? this.stdList[this.stdList.length - 1].id + 1 : 10000;
this.stdList.push({
id,
name: this.name,
age: this.age,
sex: this.sex,
});
alert("添加学生成功");
} else { // flag为false, 修改功能
this.stdList[this.selectIndex].name = this.name;
this.stdList[this.selectIndex].age = this.age;
this.stdList[this.selectIndex].sex = this.sex;
alert('修改信息成功');
}
// 清空输入框
this.name = "";
this.age = "";
this.sex = "男";
this.flag = true;
},
// 删除学生功能
delStdBtn(id) {
// 根据id来删除该条信息
const fdIndex = this.stdList.findIndex((item) => item.id === id);
this.stdList.splice(fdIndex, 1);
this.flag = true;
},
// 编辑按钮点击事件, 回填数据
editStdBtn(index) {
// 根据下表来回填数据(本案例为测试: id与下标两种方式都实验一下)
this.name = this.stdList[index].name;
this.age = this.stdList[index].age;
this.sex = this.stdList[index].sex;
this.selectIndex = index;
this.flag = false;
},
},
};
</script>
