资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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

小编给大家分享一下使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南漳免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

一、写在前面

1. Bootstrap是一个由 Twitter 开发和维护的前端框架，目前很受欢迎，Bootstrap中文网点击这里。

2. Vue.js 是一套构建用户界面的渐进式框架，点这里访问官网。

二、实现效果：

使用Bootstrap + 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
实现效果：
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
七、新增行
1.新增按钮
新增
2.添加模态框用于录入新增数据

 
  
  
   新增设备信息
   ×
  
  
   
   设备编号：
   
    
   
   
   
   设备名称：
   
    
   
   
   
   设备状态：
   
    
   
   
   
   采购日期：
   
    
   
   
   
   管理员：
   
    
   
   
  
  
   确认
  
  
 
 
3.实现新增逻辑
addRow: function () {
  this.facilities.push(this.newRow);//新行数据追加至表格数据数组中
  this.newRow = {};//新行数据置空
  }
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
好了，动态展示、新增和删除功能就讲完了，后边有空我们再来讨论页面上未实现的全选、快速检索等功能。
附1：完整js
页面源码已共享至GitHub， 点击这里 可查看下载，欢迎探讨。
以上是“使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
            
            
                        

            文章标题：使用Bootstrap+Vue.js实现表格的动态展示、新增和删除功能            

            分享网址：http://www.cdkjz.cn/article/jpccss.html
        
        

            返回首页
            了解更多建站资讯
        

    



    
相关资讯

    

        
    





    

        

            

                多年建站经验
            

            

                
多一份参考，总有益处

                
 联系快上网，免费获得专属《策划方案》及报价

                

                    
咨询相关问题或预约面谈，可以通过以下方式与我们联系

                    
 大客户专线   成都：13518219792
                          座机：028-86922220
                    

                

            

        

        

            在线咨询
            提交需求
        

    





    

        

            

                友情链接
                交换友情链接
            

            

                

                    绵阳服务器托管网站营销成都封阳台做手机网站成都网站推广四川雅安服务器托管四川搅拌罐车做网站价格四川胜锦安防成都电商网站建设方案                

            

        

    

    

        

            
成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

            

                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

            
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图