【前端】记录各种控制台警告/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);