Vue2迁移Vue3后Element UI/Element Plus的clearable属性失效及相关Vue警告问题

阿华AIGC实验室

2026-4-7

嗨，我来帮你搞定迁移后遇到的这两个问题～

一、clearable属性失效的核心原因与解决办法

首先得明确一个关键：原版Element UI只支持Vue2，Vue3项目必须用它的适配版本Element Plus。直接把Vue2的Element UI套到Vue3里，肯定会出现属性失效、报错这类兼容性问题，这就是你遇到clearable不起作用的主要原因。

解决步骤如下：

替换为Element Plus
先卸载旧版Element UI（如果还装着的话），然后安装Element Plus：
```
npm uninstall element-ui
npm install element-plus --save
```

正确引入Element Plus
可以全局引入或者按需引入，这里给你举个全局引入的例子（在main.js/main.ts里）：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

检查组件写法
Element Plus的el-input和el-select完全支持clearable属性，你原来的代码<el-input v-model="searchForm.societe" type="text" placeholder="Nom de societe" clearable></el-input>在替换后就能正常触发清除功能了。另外要注意Vue3的响应式写法：如果用的是Composition API，要确保searchForm是用reactive或ref定义的响应式对象哦。

二、解决`INSTANCE_ATTRS_CLASS_STYLE`警告

这个警告是Vue3对$attrs的行为做了改动导致的：Vue3里class和style会被包含在$attrs里，如果组件设置了inheritAttrs: false，这两个属性就不会自动透传到根元素了。

解决办法：

优先升级Element Plus
Element Plus的新版本已经修复了这个兼容性问题，直接升级到最新版就能解决大部分情况：
```
npm update element-plus
```
自定义组件场景的手动处理（如果是自己写的组件出现这个警告）
- 如果你的组件已经在根元素上用了v-bind="$attrs"，那不用改，因为class和style已经包含在$attrs里会被绑定到根元素；
- 如果是把$attrs绑定到了非根元素，那需要手动在根元素上单独绑定class和style：
```
<template>
  <div :class="$attrs.class" :style="$attrs.style">
    <child-component v-bind="$attrs"></child-component>
  </div>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>
```