解决Element-ui中Table表格无法显示的问题

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

1、准备工作:

使用命令:cnpm i element-ui -S 进行安装Element-ui,安装好了之后,进行如下配置:
解决Element-ui中Table表格无法显示的问题_第1张图片
这样操作之后,就可以使用Element-ui插件了。

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

解决Element-ui中Table表格无法显示的问题_第2张图片

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

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

解决Element-ui中Table表格无法显示的问题_第3张图片

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

解决方法:核心思想是把高本版依赖换成低版本依赖,具体操作步骤如下:
(1)在package.json文件中手动把element-ui版本改为一个较低版本,如2.9.2。
解决Element-ui中Table表格无法显示的问题_第4张图片
(2)把原来创建的Vue项目中的node_modules文件夹删掉,重新执行cnpm install,重新安装。
(3)重新安装好了执行,再次从浏览器访问,即可正常显示。
解决Element-ui中Table表格无法显示的问题_第5张图片
注意:原来项目中的element-ui版本是2.13.0,上图显示的是我重新安装的element-ui依赖版本号。

结束语:如果本篇博客对您有帮助,请点赞、关注或收藏,您的鼓励是博主进步的动力,感谢支持,共同进步。

你可能感兴趣的:(解决Element-ui中Table表格无法显示的问题)