脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element-ui中Table表格无法显示

关于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"

重新执行后效果：

问题解决！！！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue 3集成海康Web插件实现视频监控功能

    Vue 3集成海康Web插件实现视频监控功能

    本文详细介绍了如何使用 Vue 3 框架集成海康Web插件实现视频监控功能,通过定义属性、事件、变量,以及编写初始化、播放视频、处理节点点击事件等方法,我们成功实现了视频监控系统的前端部分,感兴趣的朋友一起看看吧
    2024-11-11
  • Vue 3 中 vue-router 的 router.resolve () API详解

    Vue 3 中 vue-router 的 router.resolve () API详解

    router.resolve() 就好比是一个精准的 “导航参谋”,当我们在 Vue 3 应用里需要明确某个路由地址对应的详细信息时,它就能派上用场,本文给大家介绍Vue 3 中 vue-router 的 router.resolve () API,感兴趣的朋友一起看看吧
    2025-04-04
  • Vue组件设计-Sticky布局效果示例

    Vue组件设计-Sticky布局效果示例

    这篇文章主要介绍了Vue组件设计-Sticky布局,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-05
  • Vue自动构建发布脚本的方法示例

    Vue自动构建发布脚本的方法示例

    这篇文章主要介绍了Vue自动构建发布脚本的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 构建大型 Vue.js 项目的10条建议(小结)

    构建大型 Vue.js 项目的10条建议(小结)

    这篇文章主要介绍了构建大型 Vue.js 项目的10条建议(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue组件之间通信实例总结(点赞功能)

    vue组件之间通信实例总结(点赞功能)

    这篇文章主要介绍了vue组件之间通信,结合实例形式分析了vue父子组件、兄弟组件之间通信的原理、实现方法,并给出了一个类似点赞功能的总结实例,需要的朋友可以参考下
    2018-12-12
  • Vue显示图片的几种方式小结

    Vue显示图片的几种方式小结

    本文主要介绍了Vue显示图片的几种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Vue nextTick延迟回调获取更新后DOM机制详解

    Vue nextTick延迟回调获取更新后DOM机制详解

    这篇文章主要为大家介绍了Vue nextTick延迟回调获取更新后DOM机制详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • Vue如何监测数组类型数据发生改变的(推荐)

    Vue如何监测数组类型数据发生改变的(推荐)

    这篇文章主要介绍了Vue如何监测数组类型数据发生改变的,本文通过实例代码图文详解给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-11-11
  • UniApp中实现类似锚点定位滚动效果

    UniApp中实现类似锚点定位滚动效果

    一个uniapp小程序的项目,我们需要实现一个非常实用的功能——类似于锚点定位的交互效果,即在首页中有多个tab（分类标签）,每个tab对应着不同的模块,当用户点击某个分类的tab时,需要流畅地滚动到对应的内容位置,提供更好的用户体验,
    2023-10-10

最新评论