开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
测试又提交了一个问题：某处的选择框内容模糊。我一看这不之前提过吗，只不过是另一个页面的，当时把弹窗的宽度由百分数改成了固定宽度，问题就解决了。这次用同样的方法，还是改宽度，但还是模糊，问题并没有解决。我意识到之前解决问题的方法治标不治本，只是误打误撞解决了，要彻底解决还是要找问题的根本原因。
问题分析
- 出现问题的是
<treeSelect />这个组件，我查了一下这个组件是引用了riophae/vue-treeselect这个依赖包（这个项目一开始不是我开发的，所以需要根据代码找到组件）。那么问题可以锁定是在vue-treeselect上。
解决问题
- 我网上查了一下
vue-treeselect的相关问题，并没有下拉内容会模糊的相关问题。于是，我就自己查看了一下源码，好家伙，这组件一层套一层的，样式也是多用继承。同事帮忙查了一下文字变模糊的原因，最终锁定在可能是transform引起的。 - 本想直接通过审查元素看看
vue-treeselect的样式里是否有transform，但下拉菜单点击就会隐藏，无法查看下拉菜单对应的样式（不知道jym有么有能查看的方法，欢迎在评论区告诉我），只能查看源码样式。在style.less里找到18个transform,根据样式名大致排除了15个，剩下的3个都注掉后重启项目，没变化！ - 我又重新查看了使用
<treeSelect />组件的页面，发现在<el-dialog>里的会出现模糊问题，其它地方的没有，那大致可以猜到是el-dialog里的样式引起的。果然，在.el-dialog里发现了transform，去掉后模糊问题就解决了。
总结
vue-treeselect很多样式都是继承来的，比如字体的相关样式，包括transform，所以嵌套vue-treeselect的样式不能包含transform。- 要解决父级的影响，可以设置
appendToBody为true，一般不会如此设置，会引起更多问题。 - 组件的自由度越高，受外部因素影响越大，出现问题的概率越高。
