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

最新推荐文章于 2025-06-07 09:05:30 发布

craftsman2020

最新推荐文章于 2025-06-07 09:05:30 发布

阅读量4.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： elementui vue.js 前端 elementplus vue3

https://blog.csdn.net/craftsman2020

本文链接：https://blog.csdn.net/craftsman2020/article/details/134580884

Vue 专栏收录该内容

16 篇文章

订阅专栏

文章目录

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