Element-ui中Table表格无法显示如何解决

发布时间:2022-08-01 14:11:10 作者:iii
来源:亿速云 阅读:607

这篇文章主要介绍“Element-ui中Table表格无法显示如何解决”,在日常操作中,相信很多人在Element-ui中Table表格无法显示如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Element-ui中Table表格无法显示如何解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

Element-ui中Table表格无法显示

今天项目中需要用到表格,于是就采用了由饿了么前端团队开发的Element-ui + Vue组合。

1、准备工作

使用命令:cnpm i element-ui -S 进行安装Element-ui,安装好了之后,进行如下配置:

Element-ui中Table表格无法显示如何解决

这样操作之后,就可以使用Element-ui插件了。

2、引用Element-ui官方文档中的Table表格代码

Element-ui中Table表格无法显示如何解决

3、启动端口,并在浏览器访问

问题就出现在此步骤:在浏览器输入url,回车后,浏览器空白,什么都不显示。但是写一个插值表达式(如下图所示),可以正常显示,就是表格不能显示。

Element-ui中Table表格无法显示如何解决

最终找到问题的根源是element-ui依赖版本太高,换一个低版本的依赖即可。

解决方法:核心思想是把高本版依赖换成低版本依赖,具体操作步骤如下:

(1)在package.json文件中手动把element-ui版本改为一个较低版本,如2.9.2。

Element-ui中Table表格无法显示如何解决

(2)把原来创建的Vue项目中的node_modules文件夹删掉,重新执行cnpm install,重新安装。

(3)重新安装好了执行,再次从浏览器访问,即可正常显示。

Element-ui中Table表格无法显示如何解决

注意:原来项目中的element-ui版本是2.13.0,上图显示的是我重新安装的element-ui依赖版本号。

Element-ui表格不生效问题

今天在书写代码时遇到的问题,el-table在页面中突然显示为空白,检查了甚至重复粘贴的几次官网代码都不行,后来在网上查阅了相关资料,解决了问题。

Element-ui中Table表格无法显示如何解决

原因是

element-ui的依赖版本过高所导致的,将其该成低版本即可,亲测可用。

找到对应的package.json文件,在依赖(dependencies)一栏中找到element-ui,将版本改低(如2.9.2)即可。

"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.9.2",
"vue": "^2.6.11"

重新执行后效果:

Element-ui中Table表格无法显示如何解决

到此,关于“Element-ui中Table表格无法显示如何解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. HTML表格(table)
  2. HTML中Table表格怎么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

element-ui table

上一篇:怎么使用Dapr+NestJs编写Pub及Sub装饰器

下一篇:MySQL表数据操作实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》