前言： 有一段时间没有发博客了，最近比较忙。有时我们总听见一些屏幕通知几年高级前端工程师纯前端实现表格的增删改查，今天给大家分享一下相关的这些方法，这里以el-table表格为实例

一、新增

入门级： 用对象元素绑定表单里的每一项然后再添加进数组里

var list = [{
            name: '李湘',
            age: 16
        }, {
            name: '黄兴',
            age: 12
        }, {
            name: '李牧',
            age: 14
        }]
var obj ={
    name: '小明'，
    age: 17,
    
}
var list = []
list.push(obj)

进阶级:需要考虑每一项的id不重复

var list = [{
            id: 1,
            name: '李湘',
            age: 16
        }, {
            id: 2,
            name: '黄兴',
            age: 12
        }, {
            id: 3,
            name: '李牧',
            age: 14
        }]
let _id = Math.max(...list.map(v=>{ v.id }))+1
var obj ={
    name: '小明'，
    age: 17,
    id: _id
}
list.push({...obj,id: _id})

二、编辑

循环遍历map和forEach数组

   var newObj = {
            name: '小花',
            age: 17,
            id: 4
        }
    list.forEach((item, i) => {
        if (newObj.id == item.id) {
            console.log(item.id);
            list[i] = newObj
        }
    })

三、删除

入门级:splice

    del(v,i){
        list.splice(i,1)
    }

进阶级: 循环

    del(v,i){
        list.map(item=>{
            if(item.id==v.id){
                delete item
            }
        })
    }
    

高阶级

    del(v){
        list = list.filter(item=>item.id !=v.id)
    }

三、查询

list = list.map(item=>{
    if(item.name == val.name){
        retrun item
    }
})