ElementUI的MessageBox引起的线上表格样式失效
前言
- 在线音乐戳我呀！
- 音乐博客源码上线啦！
- 本篇录入ElementUI专栏，各位看官感兴趣可移步🚶~
- 项目中常用的UI即为ElementUI，最近兴高采烈看着自己堪称完美的代码部署到服务器，线上打开一看，发现ElementUI的表格样式都丢失了。
- 这是咋回事呢，下面我盘出我的问题所在、我的思考、如何解决。
未选中！做事要做到确保万无一失，仔细仔细，再仔细，谨记👨✈️！
一、存在问题
ElementUI表格样式失效。
下面我们分析为什么会存在该问题。
二、还原场景
有一个页面，页面中有一个表格，上方有删除按钮，点击删除按钮会弹出弹出框询问【是否删除】？
多么朴素的页面，而这么朴素的页面类似有三个页面，我们叫他A、B、C页面，打开B页面时，才会出现表格样式丢失。
你敢信，这是ElementUI表格？表格样式已丢失。
三、进行分析
我们简单分析一下目前的情况。
3.1 操作
-
打开A页面，表格正常；
-
打开B页面，表格不正常；此时再回到A页面，A页面的表格也不正常了；
-
打开C页面，表格不正常；此时再回到A页面，A页面的表格也不正常了；
我们先对B页面进行分析，一个一个来😁。
可以得到的结论是：B页面有一股代码影响着表格，而且还是影响全局的表格。
为什么一开始打开A页面，表格正常？ 因为该系统页面是懒加载的，所以打开某个页面，才会去加载对应的页面代码。 当然，只要不打开B页面，整个系统的表格是正常的。
3.2 没加scoped
相信很多朋友和我第一想到的就是，B页面写style的时候，忘记加scoped局部样式了。
可我看了之后，style标签有加scoped。
更神奇的是：这个B页面，竟然没有一行css是修改ele的表格的。
3.3 引入本地样式链接
既然style没有修改表格样式，那我继续坚信【肯定是哪里修改了ele的表格样式】的原则，继续排查下去。
第二步，开始排查script标签内，有没有引入本地样式链接css。
排查了一圈，并没有找到。
在我山重水复疑无路的时候，我随便打开C页面，发现script引了一个样式链接css文件。
我看了该css文件，确实是有写着修改表格样式的样式。
于是我把在script标签引入的css文件给删除之后，打包上去线上，发现之前C页面的表格样式正常了！
于是，我抱着侥幸的心态打开B页面，表格也正常了。
我抛出一个问题，思考一下。 看来B页面、C页面，会相互影响，那为什么不会影响A页面呢？ 不应该是懒加载的吗，怎么还没有打开C页面的时候，B页面表格样式就丢失了呢？ 还有本地开发的时候，所以页面打开表格都正常，为什么一经过打包，表格样式就丢失了呢？
就在我还在思考的时候，已经有一堆需求在拿着爱的号码牌在等着我处理了。
既然问题解决了，那先处理其他问题，在回过头思考。
我的直觉告诉我，事情并没有结束，那只是表面的简单解决了而已。
背后的主谋，应该另有其码。
3.4 新问题：我打包正常，其他人打包表格样式丢失
隔天，测试人员说，你这表格样式又丢失了。
上次还好好的，我这也没更新呀！
于是，我发现同事打了个包上去。
3.5 pull？
我怀疑同事没有更新到我昨天提交的代码。
-
我问了同事，打包前，有没有先拉取我的代码？
-
同事说拉了的。
-
反问了我一句，你代码有没有推上去？
-
有呀。
有没有可能，同事改了我的模块，发现并没有。
有没有可能，你漏了什么文件没提交上去，或者.gitignore文件设置了？
-
如果你设置了
.gitignore文件，这就可以解释你打包正常，而同事打包表格样式丢失了。 -
很遗憾，并没有。
目前的情况是：我打包，线上正常，同事A打包就不正常，那我让同事B打包一下，看看情况。
结果，同事B打包也不正常。
3.6 Node版本
到这里，我可能也大概猜到：为什么我打包正常，其他同事打包不正常了。
应该是我Node版本可以兼容打包时的处理，而其他同事的版本跟我的不一样。
新项目可以统一团队Node版本，package-lock锁定版本解决。
所以：问题应该还是存在，只不过被我的Node版本高处理了，兼容了。
总不能，一直都是我来打包吧，而且这不科学。
同事一直觉得我页面B单独设置了表格样式，让我往这个方向排查。
而这是我一开始的想法，但我很自信的是，不能往这个方向排查，因为就算我设置了表格样式，我style设置的是scoped局部的，怎么可能会影响全局呢？
肯定是其他因素引起的。
3.7 小总结
我觉得存在这个问题，主要有两个原因：
- 我们的scss的
loader版本不一样，兼容效果不同，我的应该是比较新的版本。 - 写法兼容问题。深度作用器写法不同估计，我用的是scss的
::v-deep{}，如果没用预处理，则直接使用了/deep/了，有这个情况存在。
3.8 真相慢慢浮出水面
没办法了，我本地还原不了，我只能放弃我午休的时间，让同事的电脑借我排查问题了。
答案真的让你们思考人生。
好，既然是打开B页面就表格样式丢失，那我就对B页面代码一个一个删除。
我首先是把模板html，全删了，留下el-table容器，还是不行。
我把最有可能影响的scss全删了，还是不行。
那就只剩下js了。
当我把js部分删除掉，神奇的事情发生了，表格样式正常了！
我继续对js部分进行排查。
排查到最后，发现里面有一个代码是【删除的时候弹出提示框】。
3.9 MessageBox.confirm
在vue文件中，我们用ele的弹框，使用this.$confirm就可以调出弹框。
但是因为多处地方都会使用到提示框，于是我把它封装到js里面了。
但是在js文件，我们无法使用this.$confirm调出弹框。
查询文档之后，发现ele的MessageBox组件里的confirm也是弹出提示框。
相关代码如下：ele将confirm封装到MessageBox中
import { MessageBox } from "element-ui";
// 打开弹窗
const openDialog = (callBack, title = "请确认是否删除?") => {
MessageBox.confirm(title, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
callBack();
})
.catch(() => {});
};
于是，在vue文件中，使用我们封装的openDialog方法弹出弹框。
问题就出在这。
发现是MessageBox.confirm引起的表格样式丢失的情况。
后面就抛弃了封装的这个方法，在vue中直接调用。
this.$confirm("请确认是否删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {});
})
.catch(() => {});
至此问题解决。
后记
我怎么也没想到，居然是使用了MessageBox.confirm。
因为在js文件中无法直接使用this.$confirm，查阅资料，有人说confirm是封装在MessageBox中，可以调用出来，本地也确实是可以使用。
甚至我打包上去也可以。
至于，为什么我打包上去正常，而同事打包却丢失样式。
应该是Node版本的原因，可能我的比较新。能兼容。
那解释一下，为什么MessageBox.confirm，会引起表格样式丢失？
我猜应该是跟项目使用到的一些插件，起冲突了。
代码总是千变莫测，本次做个总结：一个问题出现了，要去定位问题的一个思路。我相信这种情况在各位朋友的开发中出现的可能性为0.1%。
-
当红+黄，会呈现橙色
-
当红+蓝，会呈现紫色
-
当蓝+黄，会呈现绿色
-
红+黄+蓝，会呈现黑色
所以，我们当某些插件 + 代码，可能就会有意想不到的现象发生。
发生不要紧，定位，排查，你能行滴~
👍 如果对您有帮助，您的点赞是我前进的润滑剂。
以往推荐
vue-typescript-admin-template后台管理系统
原文链接
转载自:https://juejin.cn/post/7202099191681024060