vue中实现增删改查

2024-07-11 07:06| 来源: 网络整理| 查看: 265

vue中实现增删改查

一个正在努力爱好运动的前端座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。

文章目录 vue中实现增删改查小Demo添加删除修改查询全选单选

小Demo vue实现表格的增删改查新增序号标题发布人发布时间操作 {{v.id}} {{v.name}} {{v.user}} {{v.date}} 删除编辑编辑 x 更新取消 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); }) } } 全选单选

在这里插入图片描述

【本文地址】

vue中实现增删改查

vue中实现增删改查

今日新闻

推荐新闻