用Vue实现表格的增删改
表格的删除<script src="../vue.js"></script><!-- vue案例 动态表格 --><div id="app"><table border="1" cellspacing="0"><thead><tr border="0"><td&g.
·
大家使用下面的代码就可以直接运行出来实现表格的增删改哦!
比我们之前用原生js写的更加简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
margin: 0 auto;
text-align: center;
}
form {
width: 500px;
margin: 20px auto;
flex-direction: column;
justify-content: flex-start;
align-items: center;
display: flex;
/* border: 1px solid black; */
}
.dialog {
background-color: antiquewhite;
width: 500px;
height: 200px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 20px;
display: none;
}
.dialog.active {
display: block;
}
.dialog>span {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}
input{
margin: 5px;
}
</style>
</head>
<body>
<script src="../vue.js"></script>
<div id="app">
<form action="">
<label for="">
姓名: <input type="text" v-model="info.name">
</label>
<label for="">
年龄: <input type="text" v-model="info.age">
</label>
<label for="">
性别: <input type="text" v-model="info.sex">
</label>
<button type="button" @click="addfun()">添加</button>
</form>
<table border="1" cellspacing="0">
<thead>
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="item in users" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button @click="showfun(item.id)">编辑</button>
<button @click="delfun(item.id)">删除</button>
</td>
</tr>
</tbody>
</table>
<div :class="{dialog:true,active:isshow}">
<span @click="cha">×</span>
<form action="">
<label for="">
ID: <input type="text" v-model="dia.id">
</label>
<label for="">
姓名: <input type="text" v-model="dia.name">
</label>
<label for="">
年龄: <input type="text" v-model="dia.age">
</label>
<label for="">
性别: <input type="text" v-model="dia.sex">
</label>
<button @click="queren" type="button">确认编辑</button>
</form>
</div>
</div>
<script>
const users = [
{ id: 1, name: '机械代码莹', age: 18, sex: "女" },
{ id: 2, name: '努力的小莹', age: 18, sex: "女" },
{ id: 3, name: '小莹在努力', age: 13, sex: "女" },
{ id: 4, name: '敲代码的猴', age: 18, sex: "男" }
]
var vm = new Vue({
el: "#app",
data: {
users: users,
info:{},
dia:{},
isshow:false
},
methods: {
// 表格的删除
delfun(id) {
this.users = this.users.filter(item => item.id !== id)
},
// 表格的添加
addfun(){
// 先给他添加一个id属性
this.info.id =this.users[this.users.length -1].id+1;
this.users.push(this.info)
},
// 表格的修改
showfun(id){
const result= this.users.find(item=>item.id===id);
this.dia={...result}
// 当点击编辑按钮时讲所要提交的表单显示出来
this.isshow=true
},
queren(){
//也就是把update中的内容再重新赋值回到this.users
let result = this.users.find(item=>item.id===this.dia.id)
result.name=this.dia.name
result.age=this.dia.age
result.sex=this.dia.sex
this.isshow=false
},
//点击cha号时将要显示的东西隐藏起来
cha(){
this.isshow=false
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)