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

1.   const debounce = (fn, delay) => {
2.   let timer = null;
3.   return function () {
4.     let context = this;
5.     let args = arguments;
6.     clearTimeout(timer);
7.     timer = setTimeout(function () {
8.       fn.apply(context, args);
9.     }, delay);
10.   }
11. }
13. const _ResizeObserver = window.ResizeObserver;
14. window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
15.   constructor(callback) {
16.     callback = debounce(callback, 16);
17.     super(callback);
18.   }
19. }

复制代码

4.给回调举行节流，在App.vue中添加以下代码：

1. // 解决 ElTable 自动宽度导致的「ResizeObserver loop limit exceeded」问题
2. const fixElTableErr = (table) => {
3.     const oldResizeListener = table.methods.resizeListener;
4.     table.methods.resizeListener = function () {
5.         window.requestAnimationFrame(oldResizeListener.bind(this));
6.     };
7. };
8. // 在Vue.use之前执行此函数
9. fixElTableErr(Table);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金