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也学要同样的操作才能正常使用呢,嘿嘿,答对了

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

// 将vue模块列为白名单
let whiteListedModules = ['vue', 'element-ui']

// 将vue模块列为白名单
let whiteListedModules = ['vue', 'element-ui']


然后重新运行项目,再进相应页面就会发现万恶的el-table组件不显示的问题已经完美解决。
 

猜你喜欢

转载自blog.csdn.net/qq_35432904/article/details/107387947
今日推荐