1.动态生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
<script src=" https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="container" id="app">
<button
class="btn btn-default"
@click="add()"
data-toggle="modal"
data-target="#myModal"
>
添加
</button>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="i,index in trees" :key="i.id">
<td>
<input type="text" v-model="i.studentname" disabled />
</td>
<td>
<input type="text" v-model="i.id" disabled />
</td>
<td>
<input type="text" v-model="i.firname" disabled />
</td>
<td>
<input type="text" v-model="i.lasname" disabled />
</td>
<td>
<button @click="del(i.id)">删除</button>
<button
@click="see(i),checkinfo=true"
data-toggle="modal"
data-target="#myModal"
>
查看
</button>
<button
@click="upd(i)"
data-toggle="modal"
data-target="#myModal"
>
修改
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">{
{
Motitle}}</h4>
</div>
<div class="modal-body" style="padding:0 100px 0 80px">
<label>姓名:</label>
<input type="text" v-model="studentname" :disabled="checkinfo" />
<label>学号:</label>
<input type="text" v-model="id" :disabled="idshow" />
<label>性别:</label>
<input type="text" v-model="firname" :disabled="checkinfo" />
<label>年龄:</label>
<input type="text" v-model="lasname" :disabled="checkinfo" />
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-dismiss="modal"
>
关闭
</button>
<button
type="button"
class="btn btn-primary"
v-if="seen"
@click="save"
>
保存
</button>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: function() {
return {
trees: [
{
studentname: "张三",
id: 2001,
firname: "男",
lasname: "19"
},
{
studentname: "张四", id: 2002, firname: "男", lasname: "23" },
{
studentname: "张五",
id: 3002,
firname: "女",
lasname: "23"
}
],
studentname: "",
id: "",
firname: "",
lasname: "",
Motitle: "",
seen: false,
checkinfo: true,
idshow: true
};
},
methods: {
add() {
this.studentname = "";
this.id = "";
(this.firname = ""),
(this.lasname = ""),
(this.checkinfo = false),
(this.seen = true),
(this.idshow = false),
(this.Motitle = "添加信息");
},
del(id) {
if (confirm("确认删除？")) {
var index = this.trees.findIndex(item => {
//根据id获取当前被删除对象在数据中的索引
return (id = item.id);
});
this.trees.splice(index, 1);
alert("删除成功！");
}
},
see(obj) {
this.idshow = true;
this.seen = false;
this.id = obj.id;
this.firname = obj.firname;
this.lasname = obj.lasname;
this.studentname = obj.studentname;
this.Motitle = "查看信息";
},
upd(obj) {
this.see(obj);
this.idshow = true;
this.checkinfo = false;
this.seen = true;
this.Motitle = "修改信息";
},
save() {
var index = 0;
for (var i = 0; i < this.trees.length; i++) {
if (this.trees[i].id == this.id) {
index = i;
break;
}
}
if (this.Motitle === "添加信息") {
this.trees.push({
studentname: this.studentname,
id: this.id,
firname: this.lasname,
lasname: this.id
});
alert("保存成功！");
} else {
this.trees[index].studentname = this.studentname;
this.trees[index].firname = this.firname;
this.trees[index].lasname = this.lasname;
this.trees[index].id = this.id;
alert("修改成功！");
}
$("#myModal").modal("hide");
}
}
});
</script>
</body>
</html>