Electron-Vue项目使用Element的el-table组件不显示

 

一、前言
最近我把项目进行了整体重构，将原先的vue和electron分为两个工程文件夹的形式融合为了一个electron-vue工程文件，因为有很大的改动，特别是环境和相关配置方面与原先的工程有很大的不同，随之而来就有很多坑，这篇文章要将的就是今天碰到的element-UI一个组件重构前显示OK但重构之后显示不OK的问题，详情请继续阅读。

二、问题描述
在vue组件中，使用了Element的el-table组件，当重构了之后发现这个组件在相应页面不显示（高度为零），数据什么正常，语法OK，各种路径也OK，控制台也没报错，我花了一个上午找原因…

三、问题解析
在重构之后（electron-vue融合流），项目根目录文件夹下有一个.electron-vue文件夹，下边放着几个js配置文件（我的项目是6个js文件），具体的每个js配置文件详情请参考electron官网描述（中文的，哈哈）。
另外我也浏览了Google，发现原来在vue中直接引入element的方式已经不能满足融合流的要求啦。
请打开.electron-vue文件夹下的webpack.renderer.config.js配置文件，你会找到这样一行代码，竟然需要添加白名单！对的，你没看错（不明白什么是白名单的，请自行去问度娘）：

那么，vue都需要这样做，是不是element-ui也学要同样的操作才能正常使用呢，嘿嘿，答对了，So…

四、问题解决（附上代码）
只需要将element-ui也添加进白名单就可以啦！

// 将vue模块列为白名单
let whiteListedModules = ['vue', 'element-ui']
1
2
然后重新运行项目，再进相应页面就会发现万恶的el-table组件不显示的问题已经完美解决。