vue中实现增删改查
一个正在努力爱好运动的前端
座右铭:越努力越幸运,越运动越健康,热爱编程,热爱运动。
小Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue实现表格的增删改查</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="table">
<div class="add">
<input type="text" placeholder="标题" v-model="input.name" />
<input type="text" placeholder="发布人" v-model="input.user" />
<input type="date" placeholder="发布时间" v-model="input.date" />
<button :disabled="!input.name||!input.user||!input.date" @click="addItem()">新增</button>
</div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" v-model="checkALL" @change="selectAllItem(v)" />序号</th>
<th>标题</th>
<th>发布人</th>
<th>发布时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in items" :key="v.id">
<td><input type="checkbox" v-model="v.check" @change="selectItem(v)" />{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{v.user}}</td>
<td>{{v.date}}</td>
<td>
<button :disabled="!v.check" @click="delItem(i)">删除</button>
<button @click = "updataShow(v)">编辑</button>
</td>
</tr>
</tbody>
</table>
<div id="layer" v-show="flag">
<div class="mask">
<div class="title">
编辑
<span @click="flag = false">x</span>
</div>
<div class="content" >
<input type="text" placeholder="标题" v-model="edit.name"/>
<input type="text" placeholder="发布人" v-model="edit.user"/>
<input type="date" placeholder="发布时间" v-model="edit.date"/>
<button @click="updataItem()" :disabled="!edit.name||!edit.user||!edit.date">更新</button>
<button @click="flag = false">取消</button>
</div>
</div>
</div>
</div>
</body>
</html>
window.onload = function () {
var vm = new Vue({
el: '#table',
data: {
input: {
name: '',
user: '',
data: '',
check: false,
},
items: [
{ name: '增删改查案例', user: '故心v', date: '2020-11-04', id: 1, check: false },
{ name: '增删改查案例(增改结合)', user: '故心vvv', date: '2020-11-11', id: 11, check: false }
],
flag: false,//弹框显示与隐藏
checkALL: false,//多选,
//编辑的数据
edit: {
name: '',
user: '',
data: '',
check: false,
},
},
methods: {
//添加数据
addItem() {
//每次添加的时候item最大的id+1 遍历出所有id
var _id = Math.max(...this.items.map(v => v.id)) + 1;
var { name, user, date, check } = this.input;
this.items.push({
name,
user,
date,
id: _id,
check
});
},
//全选
selectAllItem() {
//当全选,遍历循环所有check变成 变成全选的状态
this.items.forEach(v => { v.check = this.checkALL});
},
//单选
selectItem(v) {
//全部选中时 全选打上√
this.checkALL = this.items.every(v => v.check);
},
//删除
delItem(i) {
//splice
// this.splice(i, 1);
//filter
this.items = this.items.filter((v, index) => index != i);
},
//编辑弹层显示及回显
updataShow(v) {
this.flag = true;
//数据回显
this.edit={
name:v.name,
user:v.user,
date:v.date,
id:v.id,
check:v.check
}
},
//编辑更新
updataItem() {
//数据更改
var { name, user, date, id, check } = this.edit;
//循环遍历查找到并修改
this.items.forEach((v, i) => {
//查找到相对于的item
if (v.id == id) {
v.name = name;
v.user = user;
v.date = date,
v.check = check;
}
})
//编辑弹层关闭
this.flag = false;
}
},
})
}
效果展示:
添加
其中一个为空时禁用
添加
删除
选中时可删除
修改
为空时禁止更新
查询
computer:{
searchData(){
//search为空时 retun items全部数据
if(!search) return this.items;
//模糊查询
return this.items.filter(v=>{
return v.name.includes(searchName);
})
}
}
全选单选