Bootstrap

Vue2升级到Vue3及ElementUI升级到ElementPlus常见报错及修复办法

1. 报错: Uncaught (in promise) TypeError: Failed to set an indexed property on ‘CSSStyleDeclaration’: Indexed property setter is not supported.

原因分析:因使用了,methods返回字符串样式导致的报错
解决办法:将tableStyle逻辑中返回的字符串修改为对象

tableStyle({row, column, rowIndex, columnIndex}) {
    //return 'background:#009688; color:#fff!important;';
    return { 'background':'#009688', 'color':'#fff!important' };
},

2. 报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘row’)

原因分析:因在中使用导致的报错
解决办法:将替换为<template #default=“scope”>

<el-table
    :data="tableData">
    <el-table-column>
        <template slot-scope="scope"> //不要了 
        <template #default="scope"> //替换为
        ...

3. 报错: runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: validation failed. Expected one of [“”, “default”, “small”, “large”], got value “mini”.

原因分析:在、、、等组件中使用了size=“mini"或者不在[”", “default”, “small”, “large”]范围内属性。
解决办法:直接按需替换,例如:

<el-button
    size="mini"  //删除
    size="small" //替换为
    ...
 <el-table
    size="mini" //删除
    size="small" //替换为
    ...

4. destroyed()或beforeDestroy ()无效

解决办法:destroyed() 替换为unmounted (),beforeDestroy()替换为beforeUnmount

;