vue中实现增删改查

最新推荐文章于 2024-07-02 17:53:21 发布

故心v

最新推荐文章于 2024-07-02 17:53:21 发布

阅读量1.6w

点赞数 12

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_41555854/article/details/109770453

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

vue中实现增删改查

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

文章目录

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

小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);
    })
    }
}

全选单选

在这里插入图片描述

故心v

关注

12
点赞
踩
105

收藏

觉得还不错? 一键收藏
6
评论
vue中实现增删改查

vue中实现增删改查一个正在努力爱好运动的程序猿座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。文章目录vue中实现增删改查一、增（添加）二、删（删除）三、改（修改）四、查（查找）一、增（添加）//1.push();从末尾开始添加//2.unshift();//从第一位开始添加元素二、删（删除）//1.splice（删除的索引，删除的个数）；例如splice（1,1）；//2.filter方法 arr.filter((v，i)=>{return i!=index}
复制链接

扫一扫

专栏目录