原因是 el-form 的 v-model="loginForm" ref="loginForm" 在vue3中值不能相同
把ref去掉或者改名即可
这是js的代码（对象记得用reactive，不然也会无法输入）
import { reactive } from 'vue';
const loginForm = reactive({
username: '',
password: '',
});
const rules = reactive({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
],
});这个是可以输入的
<el-form
:model="loginForm"
:rules="rules"
ref="loginData">
<el-form-item prop="username" label="Email">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
</el-form>这是无法输入的文章来源：https://www.toymoban.com/news/detail-513129.html
<el-form
:model="loginForm"
:rules="rules"
ref="loginForm">
<el-form-item prop="username" label="Email">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
</el-form>就改了个ref文章来源地址https://www.toymoban.com/news/detail-513129.html
到了这里，关于【踩坑笔记】vue3 element-plus el-input 无法输入问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![el-table点击表格某一行添加到URL参数，访问带参URL加载表格内容并滚动到选中行位置 [Vue3] [Element-plus 2.3]](https://imgs.yssmx.com/Uploads/2024/02/621970-1.png)
