electron-vue在使用element-ui时部分组件无法显示问题

原文连接: https://juejin.im/post/5d132629e51d45772a49ad71

问题描述

在使用electron开发桌面系统时,遇到部分element-ui组件在页面中无法渲染的问题。我遇到的是el-table组件没有被渲染,导致无法显示数据。

解决方法

在electron-vue的描述文档中有一段关于白名单的说明,如下:

  • 白名单里的外部组件

  • 一个关于此配置的重要的事情是,你可以将特定的模块列入白名单,而不是把它视为 webpack 的 externals。并没有很多情况需要这个功能,但在某些情况下,对于提供原始的 *.vue 组件的 Vue UI 库,他们需要被列入白名单,以至于 vue-loader 能够编译它们。另一个使用情况是使用 webpack 的 alias,例如设置 vue 来导入完整的 编译+运行环境 的构建。因此,vue 已经在白名单中了。

由此可以判断,只需要将element-ui加入到这个白名单中就可以解决上面的问题。白名单配置文件为.electron-vue文件夹中的webpack.renderer.config.js文件,只需将代码

 
let whiteListedModules = [‘vue‘]

  

修改为

let whiteListedModules = [‘vue‘, ‘element-ui‘]

 

问题解决

原文地址:https://www.cnblogs.com/xuange306/p/11793015.html

时间: 2024-10-10 23:58:52

electron-vue在使用element-ui时部分组件无法显示问题的相关文章

在使用element ui时 select组件获取label问题

最近在工作的时候需要实现多个条件联合查询,这个其实就是一条sql语句.但是,我们数据库中存储的是根据前端传来id的值所对应的值,而不是直接存的id,使用select组件时,却只能取到value值,无法作为后台查询的条件. 我们需要的是select 组件的label值,而不是看不见的value值. 首先,根据element ui select组件使用手册,给组件添加'change'方法 1 @change=changeValue 再根据Array 的 find方法找出对应的值即可. 1 chang

vue模块化(echart+element ui)

最近看了下vue的框架,随手做了个项目,记录分享下 技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图 主要是配置的是npm 打包命令 和引入vue-route vue的路由文件 和element ui 文件 下面这个是 引入echart.js 文件, 基本资料就这些. 首先我们开始构建一个vue-cli项目 1.首先node环境(这里就不多啰嗦了) 2.执行vue-cli命令 npm install --gl

vue+element UI实现分页组件

1.前言 在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量往往会非常庞大,如果将所有要展示的数据一次性请求获取并展示到页面上,那页面长度势必会变得非常的长,很不美观.更重要的是,如果数据量过于大,在页面加载时一次性请求全部数据将会耗费大量网络资源,性能极低.但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会很大,这就极大的节省了网络资源,提高了性能.本文就以vue结合element UI实现一个数据分页

vue+vuex+router+element ui

1. cnpm install -g vue-cli 项目的main.js引入import Vue from 'vue' 2. 创建项目 vue init webpack +项目名称 3.  cnpm install ----->下载依赖文件 npm run dev ----->运行项目 4.config文件夹,下面的index.js里面修改port端口号 /////////////////////////////////////// 好像vue 在2.0之后自动的就引入了router和vue

Element ui 的树形组件使用的 jsx 写法无法运行。

传统后台开发人员.最近写管理后台使用了element-ui .在tree这这个组件的自定义节点上碰到问题了.官方文档在这里:http://element-cn.eleme.io/#/zh-CN/component/tree源代碼: 文档提示: 使用render-content指定渲染函数,该函数返回需要的节点区内容即可.渲染函数的用法请参考 Vue 文档.注意:由于 jsfiddle 不支持 JSX 语法,所以本例在 jsfiddle 中无法运行.但是在实际的项目中,只要正确地配置了相关依赖,就

element ui dialog 父子组件传值

最近在做课设的时候?用到了Elementui?中的dialog的组件,但在将dialog作为一个子组件的时候,传值出现了问题.当关闭dialog的时候应该怎么传值? ? 一开始的时候的想法比较简单,就是父组件直接传值来作为子组件的show/hidden的值. 然而这样的问题是当子组件close的时候,他会直接直接改变他的值,但是子组件不能直接改变props的值,因此可以通过子组件触发事件给父组件. ? 子组件在关闭时候的事件,通过阅读官方文档,我们发现他提供了一个关闭的时候的回调事件. 我们可以

饿了么Element UI之Upload组件图片上传【原创】

图片文件换汤不换药,只要注意前端的写法即可 1.饿了么组件可以利用 http-request 的属性对上传进行自定义 :http-request="uploadFile" 2.设置文件FormData对象传入请求 const formdata = new FormData(); const file = params.file; formdata.append("file", file); 3.全部代码 <template> <div style=

关于vue和element ui的国际化

因为公司需求近日一直在做国际化处理, 首先,我们用的是vue的单文件组件,实现国际化是在写好的一个文件组件里面vue_min.js里,而且它相当于一个js的模块,在每一个单文件的组件里面使用. 遇见的第一个问题国际化失败,只显示自己定义的json文件国际化.而且element ui的的国际化不显示, 解决的方案就是, 1.引入的时候应该从新引入 import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'e

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-