【前端】记录各种控制台警告/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文件中添加：

  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中添加以下代码：

// 解决 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);