关于Vue3使用element-plus表单组件无法修改的问题

最新推荐文章于 2023-09-22 17:37:36 发布

关注本猪小猪谢谢喵

最新推荐文章于 2023-09-22 17:37:36 发布

阅读量477

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74037817/article/details/130755604

版权

简单的说一下就是说我reactive了一个变量user，然后用axios接受后端数据并且赋值，然后弹出表单，发现表单能动态显示数据但是不能修改，困扰了我好久好久，然后发现用 ref 就好了，真别用byd reactive了好吧，写前端发现很多问题只要用了reactive就会出问题然后改成ref就好了

可能是我的理解不太行吧。。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

关注本猪小猪谢谢喵

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
关于Vue3使用element-plus表单组件无法修改的问题

可能是我的理解不太行吧。
复制链接

扫一扫

Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序

06-15

在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...

项目中简单封装vue3+element-plus表单

最新发布

04-01

项目中简单封装vue3+element-plus表单

1 条评论您还未登录，请先登录后发表或查看评论

关于element表单动态添加表单项，无法修改的问题

BookstoreSpirit的博客

04-15

2230

element表单动态添加的表单项值无法修改问题

【已解决】vue3的reactive赋值，数据不能动态改变的问题

w5206666的博客

05-28

5482

vue3的reactive赋值，数据不能动态改变的问题问题描述：当有数据 const data = reactive({age:15,sex:'女'}) 此时新来了一个变量 const param = {age:16,sex:'女'} 想要将data1的值赋值给data。若data=data1便不能动态修改data的值解决办法：将const data = reactive({age:15,sex:'女'}) 改写成： const data = reactive( info : { age:

解决普通方式修改不了 ElementPlus 默认样式的问题

weixin_49809163的博客

01-27

4927

解决普通方式修改不了 ElementPlus 默认样式的问题

Vue中回显数据传入表单中无法修改

现充爆破师的博客

04-11

4764

通过axios请求后台获取了对象，存入了ruleForm中，在页面中通过键获取了值  <el-form-item> <el-input v-model="ruleForm.fee"></el-input> </el-form-item> 但是发现前台操作时没有办法进行修改...

excel锁定单元格不能修改_3步让表格只能输入不能修改，保护表格格式，快速搞定数据汇总...

weixin_39929254的博客

11-18

3145

Hello,大家好，今天跟大家分享下我们如何让表格只能输入数据而不能修改数据。在工作中当我们制作好表格模板分发给大家填写后，经常需要将数据汇总起来，因为表格格式统一，所以汇总起来还是比较简单快捷的，但是当表格模板被更改后数据汇总就显得没那么简单了，我们可能需要一个一个的调整，十分的麻烦，这个时候设置表格只能输入而不能修改就显示十分必要了一、取消锁定如下图，我们想要保护首行以及首列不能修改，在其他的...

element动态给输入框（数组对象形式）赋值之后输入框不可编辑

qq_36821274的博客

12-28

1489

由于业务需求，建的表单全部都是动态并且属于数组构成，在赋值之后发现点不了，不可编辑方法一：（因为我的输入框是属于数组里面的，此方法更合适） <el-radio-group v-model="item.realData1" @input="changeUpdate"> <el-radio label="1">有身份证</el-radio> <el-radio label="2">暂缺身份证</el-radio> </el-r

vue-form-generator:vue3 + ts + element-plus表单生成器

04-10

Vue Form Generator是一款基于Vue.js的库，特别针对Vue 3、TypeScript以及Element Plus组件库设计的动态表单生成器。这个工具允许开发者通过JSON schema快速构建复杂的表单，极大地提高了开发效率，减少了手动编写...

vue3Util:基于vue3 element-plus form表单二次封装

05-05

Element Plus是流行的Vue2和Vue3兼容的UI组件库，其在Vue3中的使用为开发者提供了丰富的组件和优雅的设计风格。在Vue3Util中，你可以期待以下关键知识点： 1. **Vue3 Composition API**：Vue3引入了Composition ...

elementUI 设置input的只读或禁用的方法

01-21

只读：readonly 在data里定义：readonly: true, 然后在input框里加上readonly就可以了。禁用：disabled 在data里定义：edit: true, 然后在input框里加上：:disabled=”edit”就可以了 PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content

基于vue3+element-plus的管理系统.zip

05-16

基于vue3+element-plus的管理系统基于vue3+element-plus的管理系统基于vue3+element-plus的管理系统基于vue3+element-plus的管理系统基于vue3...

element的el-form表单数据赋值回显后无法编辑修改

weixin_40765227的博客

04-17

1755

写完之后表单无法修改，怎么点击都没反应。使用$set赋值即可。

element的el-form表单数据绑定或者回显后无法编辑修改

Schaffer的博客

05-10

3597

在赋值后加上如下代码： this.formData = JSON.parse(JSON.stringify(this.formData)); this.formData = JSON.parse(JSON.stringify(this.formData));

【已解决】vue动态表单v-model无法编辑

bao

03-29

3014

vue动态表单v-model无法编辑

在用element-plus时select下拉赋值没反应

泠泠似水

09-22

756

在用element-plus时，突然发现下拉选择没反应了，感觉好奇怪~选择后依旧空白没反应，看来命名后面也要注意一些呢~

Vue-input输入框输不了值改不了-select多选，选了没效果，视图没更新

路虽远行则将至，事虽难做则必成。

04-23

1301

在实际开发中添加修改的form表单，不是什么时候都是都是一一对应绑定form值的。来回赋值，频繁的修改v-model绑定的值就会发现输入不了值，或者选中值没效果，这是因为视图没更新解决方案我们只需要调用vue 的forceUpdate()方法，每改变一次值就强制更新视图。input输入框更新方案@input在- Input 值改变时触发<el-inputselect多选选择器@change-值改变时候触发<el-selectplaceholder="请选择"<el-option。

Vue3 element-plus el-select 无法选中，又不报错

m0_37616866的博客

04-26

2833

Vue3 中el-select 下拉框使用的坑

element,编辑表单的状态（可修改表单及不可修改表单）shj

爬楼梯的前端小白的博客

02-17

7084

不点编辑的时候表单默认设置true 禁用,点了编辑后表单禁用取消可以修改账户的密码再点确定之后即回复第一张图状态

VUE3使用element-plus表单验证

05-28

在 Vue3 中使用 Element Plus 进行表单验证，需要先安装 Element Plus 和 VeeValidate（Element Plus 依赖于 VeeValidate）。安装命令如下： ``` npm install element-plus vee-validate@next ``` 安装完成后，可以在 main.js 中引入并注册 Element Plus 和 VeeValidate： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import VeeValidatePlugin from './plugins/vee-validate' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.use(VeeValidatePlugin) app.mount('#app') ``` VeeValidate 需要在 plugin 中进行注册。可以先创建一个 plugins 文件夹，然后在其中创建一个 vee-validate.js 文件： ```javascript import { defineRule, configure } from 'vee-validate' import { required, email } from '@vee-validate/rules' export default { install: (app) => { // 配置 configure({ generateMessage: ({ field, rule }) => { const messages = { required: `${field}不能为空`, email: `${field}格式不正确` } return messages[rule] } }) // 定义规则 defineRule('required', required) defineRule('email', email) } } ``` 这里定义了两个规则：required 和 email。然后在组件中使用： ```html <template> <el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { reactive } from 'vue' import { useVeeValidate } from '@vee-validate/vue3' export default { setup() { const { form, handleSubmit, validate } = useVeeValidate({ initialValues: { email: '' } }) const rules = { email: 'required|email' } const submitForm = () => { validate().then((result) => { if (result.valid) { console.log('提交成功') } }) } return { form, rules, submitForm } } } </script> ``` 这里使用了 VeeValidate 提供的 useVeeValidate hook，它返回了一个 form 对象、handleSubmit 方法和 validate 方法。form 对象包含了表单的所有数据，handleSubmit 方法用于提交表单，validate 方法用于验证表单。rules 对象定义了表单验证规则。