0
点赞
收藏
分享

微信扫一扫

数据恢复软件:电脑丢失文件,及时使用数据恢复软件恢复!

天使魔鬼 2024-08-09 阅读 33

一、Element Plus

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

在这里插入图片描述

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

解决方法
1.找到报警告的位置, 确认组件的根节点是否为一个有效的 DOM 元素
2.运行时指令:v-loading、v-show、v-if…
3.如下图示例:el-dialog上不能使用自定义指令v-loading

确认组件的根节点是否为一个有效的 DOM 元素

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);
举报

相关推荐

电脑端免费数据恢复软件

数据丢失如何恢复

0 条评论