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

 更新时间:2022年08月01日 10:17:11   作者:Apple-yeran  
这篇文章主要介绍了关于Element-ui中Table表格无法显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Element-ui中Table表格无法显示

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

1、准备工作

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

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

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

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

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

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

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

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

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

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

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

Element-ui表格不生效问题

今天在书写代码时遇到的问题,el-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 Plus的el-tree-select组件懒加载+数据回显详解

    Element Plus的el-tree-select组件懒加载+数据回显详解

    el-tree-select组件是el-tree和el-select的结合体,他们的原始属性未被更改,下面这篇文章主要给大家介绍了关于Element Plus的el-tree-select组件懒加载+数据回显的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue利用axios来完成数据的交互

    vue利用axios来完成数据的交互

    这篇文章主要介绍了vue利用axios来完成数据的交互,本文通过实例代码给大家讲解数据交互方法及安装方法,需要的朋友可以参考下
    2018-03-03
  • vue3使用reactive赋值后页面不改变

    vue3使用reactive赋值后页面不改变

    本文主要介绍了vue3使用reactive赋值后页面不改变,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue2异步更新及nextTick原理详解

    Vue2异步更新及nextTick原理详解

    Vue2的异步更新机制是基于JavaScript的事件循环机制实现的。nextTick方法则是在DOM更新后执行回调函数。本文详细介绍了Vue2的异步更新机制和nextTick原理,对于理解Vue2的渲染机制和优化性能有很大的帮助。
    2023-04-04
  • vue实现短信验证码登录功能(流程详解)

    vue实现短信验证码登录功能(流程详解)

    无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下
    2019-12-12
  • vue-element-admin+flask实现数据查询项目的实例代码

    vue-element-admin+flask实现数据查询项目的实例代码

    这篇文章主要介绍了vue-element-admin+flask实现数据查询项目,填写数据库连接信息和查询语句,即可展示查询到的数据,需要的朋友可以参考下
    2022-11-11
  • vue-tree-chart树形组件的实现(含鼠标右击事件)

    vue-tree-chart树形组件的实现(含鼠标右击事件)

    Vue-Tree-Chart,一个Vue.js2组件,本文就详细的介绍一下vue-tree-chart树形组件的实现(含鼠标右击事件),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    本篇文章主要介绍了vue.js组件化开发实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • Vue Router 配合 keep-alive 不生效的问题及解决方案

    Vue Router 配合 keep-alive 不生效的问题及解决方案

    我在 app.vue 中使用了 router-view 标签,来展示 layout 和其他一级路由,然后在 layout 下的 main 区域使用了一个 router-view 来展示通过菜单栏切换的子路由,下面给大家介绍Vue Router 配合 keep-alive 不生效的问题及解决方案,感兴趣的朋友一起看看吧
    2024-01-01
  • Vue指令实现大屏元素分辨率适配详解

    Vue指令实现大屏元素分辨率适配详解

    这篇文章主要为大家介绍了Vue指令实现大屏元素分辨率适配详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论