前言:
组内大佬交给我们一个任务,说好的前后端分离,但是后端同学直到做完才丢给我一个后端项目,连份接口文档都没得。擦,之前用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数组,当点击编辑时,先判断状态,然后根据索引,把获取到的数据回写到修改模态框中。遇到的一个坑是当修改一个定时任务的状态后,此时判断的还是用的缓存里面的数据判断的