【前端】记录各种控制台警告/bug

一、Element Plus

1、控制台警告:"Runtime directive used on component with non-element root node. The directives will not function as intended."

错误原因:在 Vue 组件上使用了运行时指令(指那些在运行时动态绑定到 DOM 元素上的指令),但是该组件的根节点不是一个标准的 DOM 元素(例如 div 或 span)

原因:自定义指令不能放到组件上,而是要放到自有的元素上。

解决方法

1.找到报警告的位置, 确认组件的根节点是否为一个有效的 DOM 元素

2.运行时指令:v-loading、v-show、v-if...

3.如下图示例:el-dialog上不能使用自定义指令v-loading

Element UI 和 Element Plus 中的 el-dialog组件本身是一个封装好的组件,它有自己的内部结构和生命周期。当你尝试在 el-dialog 上使用 v-loading指令时,可能会遇到一些问题,主要是因为 v-loading 指令期望的是一个标准的 DOM 元素,而 el-dialog的根节点可能不是这样的元素。

2、Ignored: ResizeObserver loop limit exceeded

element-plus 使用el-table 在切换tab栏时报错:

原因:ResizeObserver不能处理所有的observations导致报错;

解决方法:

1.阻止table的重绘,给每个<el-table-column>设置固定的width,缺点是无法自适应宽度。

2.给每个<el-table-column>设置min-width

3.添加debounce()防抖方法,在App.vue文件中添加:

javascript 复制代码
  const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
}

4.给回调进行节流,在App.vue中添加以下代码:

javascript 复制代码
// 解决 ElTable 自动宽度导致的「ResizeObserver loop limit exceeded」问题
const fixElTableErr = (table) => {
    const oldResizeListener = table.methods.resizeListener;
    table.methods.resizeListener = function () {
        window.requestAnimationFrame(oldResizeListener.bind(this));
    };
};
// 在Vue.use之前执行此函数
fixElTableErr(Table);
相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作