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