一、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
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);