使用Bootstrap + Vue.js实现表格的动态展示、新增和删除

一、写在前面

 1. Bootstrap是一个由 Twitter 开发和维护的前端框架，目前很受欢迎，Bootstrap中文网点击这里。
2. Vue.js 是一套构建用户界面的渐进式框架，点这里访问官网。

二、实现效果：

三、页面引入bootstrap、vue资源

 这里需要注意的是，Boostrap依赖于JQuery，必须在引入Boostrap之前引入JQuery。

四、绘制表格

1.工具栏区

   

        

            

                新增
                保存
            
            删除
        
        

            

                
                
                        
                    
            
        
    

2.表格区

    

        

            

                

                

                    

                    
序号
                    
设备编号
                    
设备名称
                    
设备状态
                    
采购日期
                    
设备管理员
                
                
                

                

                    

                    
{{index+1}}
                    
{{facility.code}}
                    
{{facility.name}}
                    
{{facility.states}}
                    
{{facility.date}}
                    
{{facility.admin}}
                
                
            
        
    

这里需要说明的是：
 1.表格table的class Bootstrap3和Boostrap4有所不同；
 2. vue.js for循环，vue1与vue2有所出入，尤其是下标index的使用。
以上两点我们在使用中需要根据自己的版本做相应调整了。

至此，展示表格数据的静态页面已经完成，接下来我们使用Vue.js使表格数据成为动态的。

五、 创建VUE对象、初始化表格数据

1.初始化数据

    var datas = [
        {
            code: "A2017-001",
            name: "3800充电器",
            states: "正常",
            date: "2017-01-21",
            admin: "andy"
        },
        {
            code: "A2017-002",
            name: "Lenovo Type-c转接器",
            states: "正常",
            date: "2017-01-21",
            admin: "zero"
        }];

Tips:  datas在实际的场景中应当是通过ajax的方式访问后台获取的业务数据。

2.创建vue对象

    new Vue({
        el: "#vueApp",
        data: {
            checkAll: false,// 是否全选
            checkedRows: [],// 选中的行标，用于删除行
            facilities: datas,// 表格数据
            newRow:{}// 新增的行数据，用于新增行
        }
    })

ok，我们已经完成了表格数据的动态展示，下面我们来实现删除行数据功能。

六、删除行

删除按钮：

    删除

实现删除功能：

    delRows:function () {
                if (this.checkedRows.length <= 0){//是否选中判断
                    alert("您未选择需要删除的数据");
                    return false;
                }
                if (!confirm("您确定要删除选择的数据吗？")){//删除确认
                    return false;
                }

                for(var i=0;i

实现效果：

七、新增行
1.新增按钮

    新增

2.添加模态框用于录入新增数据

    

        

            

                

                    
新增设备信息
                    ×
                
                

                    

                        
设备编号：
                        

                            
                        
                    
                    

                        
设备名称：
                        

                            
                        
                    
                    

                        
设备状态：
                        

                            
                        
                    
                    

                        
采购日期：
                        

                            
                        
                    
                    

                        
管理员：
                        

                            
                        
                    
                
                

                    确认
                
            
        
    

3.实现新增逻辑

    addRow: function () {
                this.facilities.push(this.newRow);//新行数据追加至表格数据数组中
                this.newRow = {};//新行数据置空
            }

好了，动态展示、新增和删除功能就讲完了，后边有空我们再来讨论页面上未实现的全选、快速检索等功能。

附1：完整js

页面源码已共享至GitHub，点击这里可查看下载，欢迎探讨。