bootstrap-table 各类踩坑集合

前言:
组内大佬交给我们一个任务,说好的前后端分离,但是后端同学直到做完才丢给我一个后端项目,连份接口文档都没得。擦,之前用vue ant design 练的手,这么一个简单的表格应用好像光用vue有些样式没得搞,所以起初的想法是vue+bootstrap,所以做出来的效果是:
在这里插入图片描述
呃,有些那个啥是吧。最后发现bootstrap-table 这个插件好像不错,所以,就进入bootstrap-table踩坑了。。。

1、bootstrap-table引入

2、初始化

跨域问题,属性设置,ajax请求

3、bootstrap-switch在表格中的应用

初始化,渲染生效

4、模态框中表单的应用

5、利用模态框表单完成新增

表单使用button提交,提交后模态框关闭,清空表单,表单验证,验证后重置验证规则

6、完成编辑修改

我的想法是定时任务启动状态下不能进行修改,所以逻辑判断就是当taskStatus !== 1 时弹出模态框,else 直接 return。按照网上这篇博客的意思是先获取table中所有的数据,,然后将这data转换为json数组,当点击编辑时,先判断状态,然后根据索引,把获取到的数据回写到修改模态框中。遇到的一个坑是当修改一个定时任务的状态后,此时判断的还是用的缓存里面的数据判断的
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值