【Vue】运行Vue项目时使用element-ui报错:ResizeObserver loop limit exceeded at eval...

这篇具有很好参考价值的文章主要介绍了【Vue】运行Vue项目时使用element-ui报错:ResizeObserver loop limit exceeded at eval...。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

vue3项目使用element plus的el-table组件,在切换页面时报错


问题描述

报错信息为:

ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)

如下图:
【Vue】运行Vue项目时使用element-ui报错:ResizeObserver loop limit exceeded at eval...相关代码如下:

<el-table :data="tableData" border style="width: 100%;">
	<el-table-column prop="name" label="品牌" width="180">
  </el-table-column>
  <el-table-column prop="price" label="价格" width="180">
  </el-table-column>
  <el-table-column prop="date" label="日期">
  </el-table-column>
 </el-table>

原因分析:

查阅相关解答之后,找到了比较可能的原因:
网友:Qyouu

element-ui 自2.3.5版本后,Table-column取消了默认宽度大小,增加了 type参数,type的可选值有selection/index/expand,每个type对应了一些默认的宽度设置,设置了type不报ResizeObserver loop limit exceeded错误了,但是column的宽度不再自适应均分table的宽度,只能写死width的宽度,这点非常不好,很丑~

在我添加了给colum 添加 type 之后还是会报错,但是在给column加上了width属性之后便不再报错,应该就是column宽度没有给定导致的问题.


解决方案:

如果直接给最后一个column添加长度,表格会变得巨丑无比,如图:

<el-table :data="tableData" border style="width: 100%;">
	<el-table-column label="序号" width="180" type="index">
	</el-table-column>
	<el-table-column prop="name" label="品牌" width="180">
	</el-table-column>
	<el-table-column prop="price" label="价格" width="180">
	</el-table-column>
	<el-table-column prop="date" label="日期" width="180">
	</el-table-column>
</el-table>

【Vue】运行Vue项目时使用element-ui报错:ResizeObserver loop limit exceeded at eval...虽然不报错了,但是很丑,需要自己再调样式。
因此,给定最后一个el-table-column min-width 属性即可

<el-table-column prop="date" label="日期" min-width="180">
</el-table-column>

效果如图:
【Vue】运行Vue项目时使用element-ui报错:ResizeObserver loop limit exceeded at eval...文章来源地址https://www.toymoban.com/news/detail-503571.html

到了这里,关于【Vue】运行Vue项目时使用element-ui报错:ResizeObserver loop limit exceeded at eval...的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 安装element-ui后,运行报错ERROR in ./node_modules/element-ui/lib/element-ui.common.js Module not found: Erro

    ERROR in ./node_modules/element-ui/lib/element-ui.common.js Module not found: Error: Can’t resolve ‘throttle-debounce/debounce’ in “xxx” ERROR in ./node_modules/_element-ui@2.13.2@element-ui/lib/tooltip.js Module not found: Error: Can’t resolve ‘throttle-debounce/debounce’ in ‘D:IdeaProjectsdolphindolphinscheduler-uinode_modules_element-ui@

    2024年02月11日
    浏览(47)
  • 【VUE】4、VUE项目中引入Element-UI

    1、element-ui 官方文档(中文版) 2、安装 element-ui 1、进入项目目录下 2、安装 element-ui 注意: VUE2 使用的是 element-ui,VUE3 使用的是 element-plus 3、引入 element-ui(完整引入) 1、打开 main.js 文件 在 main.js 文件中,引入 element-ui 2、注册 element-ui 以上代码便完成了 Element 的引入。需

    2024年02月01日
    浏览(51)
  • vue项目引入element-ui的三种方式

    通过执行命令vue add element来进行引入 通过执行命令npm i element-ui -S安装依赖 main.js文件引入element-ui main.js文件全局引入element-ui样式 安装babel-plugin-component 修改babel.config.js文件 main.js按需引入组件

    2024年02月11日
    浏览(48)
  • 1. Vue项目中element-ui版本进行升级

    vue项目element-ui版本为1.xx.x,要将其升级为2.15.7(最新版本)。 将原element-ui版本删除 安装升级的版本: 全局引入element-ui:在项目的main.js,原来的theme-default换为theme-chalk。 对vue版本进行升级(如果vue版本在2.5.10之下element-ui版本就不可高于2.7): 将 vue-template-compiler的版本升级: 启

    2024年02月11日
    浏览(257)
  • vue项目打包上线element-ui的icon偶尔乱码问题

    线上环境偶尔会复现, 具体: 一般使用不会出现这个问题,因为一般引入的是element-ui的css文件,问题出在于为了主题色变化啊,需要用到scss变量引入了scss文件。 @import “~element-ui/packages/theme-chalk/src/index”; 而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对

    2023年04月17日
    浏览(48)
  • 搭建vue3项目+按需引入element-ui框架组件

    场景 :使用vue create脚手架快速搭建vue的项目 前提 :需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 查看安装的版本(显示版本号说明安装成功) 1.cmd窗口跳到需要新建项目的文件夹下,使用vue create 2.我这里选择第三个Ma

    2024年02月16日
    浏览(61)
  • Vue + Element-ui实现后台管理系统---项目搭建 + ⾸⻚布局实现

    目录:导读 项目搭建 + ⾸⻚布局实现 一、项目搭建 1、环境搭建 2、项目初期搭建 二、Main.vue 三、左侧栏部分(CommonAside.vue) 四、header部分(CommonHeader.vue) 五、Home.vue 写在最后 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一共包含3个部分: 1、左侧栏

    2024年02月02日
    浏览(51)
  • vue项目element-ui上传组件自定义方法无法获取进度

    原因:element-ui中的up-load组件使用时,若用自定义上传http-request,会重新申明XMLHttpRequest,on-progress里的申明则被覆盖,无法使用该钩子,无法添加进度条 方案一:假进度条;写个假进度条优化用户体验,使用el-upload组件里on-change方法的status状态,配合定时器 ,以vue3为例 ,

    2024年02月15日
    浏览(50)
  • vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后,icon全部丢失

    问题:vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后,icon全部丢失 解决办法及原因: elementui在2.12版本中icon数量较之2.4.9版本的扩展2倍不止。原来webpack中对于字体loader的限制是limit10000,就会将字体转换为base64,2.12版本中字节已经超过

    2024年02月16日
    浏览(66)
  • 解决element-ui按需引入使用message报错

     报错如上图所示 接下来告知解决方法 ,下方操作均在main.js中   在单独按需引入element组件时,message组件需要挂载到Vue全局对象上,而不是用 Vue.use(Message) ,这是message组件与其他组件不同的地方。其中与之相同、需要挂载到Vue全局对象上的,还有confirm组件。

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包