《bootstrap-table-vue.js系列》(三) bootstrap-table-editable的支持

一、bootstrap4和bootstrap-table集成bootstrap-editable的坑

原来的 bootstrap-editable 只支持到bootstrap3，bootstrap4以上的官网的例子也使用不了，

直接报错：

bootstrap-editable.min.js:5 Uncaught TypeError: Cannot read properties of undefined (reading 'addClass')

  二、为什么会发生这种问题呢

因为：this.tip() 已经 undefined  ，那么 this.tip() 怎么来的，this.tip()使用的是bootstrap3的tooltip.js文件，bootstrap4又重新写了tooltip.js，使用就会造就了this.tip() 是 undefined，并且bootstrap-editable依赖原来的bootstrap3的tooltip.js，tooltip.js又依赖bootstrap3的popover.js，

解决方案一

1、引入依赖

在bootstrap4单独引入旧的bootstrap3的tooltip.js和popover.js，必须两个都引入，

同时注意先后顺序，1,tooltip.js 在前面，2,popover.js  在后面， 再引入 3,bootstrap-editable 

2、引入Glyphicons 字体图标

然后去定制Glyphicons，点击下载，在引入

解决方案二

下载修改好的bootstrap-editable.js，方案二 不需要你做什么，只需要将下载好的js文件覆盖旧的文件就可以使用了，也不需要你引入方案一的操作，下载地址

blog_resource: blog资源 - Gitee.comhttps://gitee.com/itgsvip/blog_resource/tree/master/bootstrap4-editable

必须样式（重点）

 .fade:not(.show) { opacity: 1 !important; } 

 在bootstrap4 中的样式是  .fade:not(.show) { opacity: 0; } 

可参考css

.table tbody .fade:not(.show) { opacity: 1 !important; }
.popover-content{padding-right: 2px }
.editable-buttons{  line-height: 30px; }

 

最终修复好的效果

后话，这问题百思不得其姐，网上也找不到bootstrap4的解决方案，各种修改源码和各种调试，面临放弃解决这个问题的想法，但是第二天又基于昨晚调试到的部分继续调试，然后就修改好这个bug了，官网给的例子也不好使。

人生无常，大肠包小肠~，修改的插件就是把方案一的代码抽离出来，放进bootstrap-editable，并且移除bootstrap3的样式代码，替换成bootstrap4的样式而已