vue+bootstrap制作简易表格的添加、删除与搜索

所用到的技术vue+bootstrap
效果图如下

代码如下所示

  
  
    
  
  
  



id:

name:

添加
搜索关键字:

  

    

      

        
id
        
name
        
日期
        
操作
      
    
    

      

        
{{item.id}}
        
{{item.name}}
        
{{item.ctime}}
        
删除
        
      
    
  

在这段代码中，删除按钮的方法也可以使用数组的some方法

deleteC(id) {
   this.list.some((item, i) => {
      if (item.id === id) {
        this.list.splice(i, 1);
        return true;
      }
    );
},

在这段代码中，搜索的方法也可以使用filter,并且把indexOf换成了数组的includes方法

search(keyword) {
   return this.list.filter((item) => {
        if (item.name.includes(this.keywords)) {
          return true;
        }
   });
},

但是，以上的添加也是存在bug的，因为还没有进行验证，具体的验证方法，这里我就不一一阐述了，之后的博客会专门写表单验证的具体方法。