VUE动态控制表单是否被编辑

最新推荐文章于 2024-07-07 18:00:46 发布
最新推荐文章于 2024-07-07 18:00:46 发布
阅读量2.5k 收藏 3
点赞数
分类专栏： VUE 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013833472/article/details/129011147
版权

有的时候,有那么一个需求,就是查看表单的时候不允许编辑,有的时候允许编辑,所以就有了如下经验

 <el-form ref="form" :model="form" :rules="rules" label-width="20%" :disabled='this.title==="查看"'></el-form>

一个比较取巧的行为就是使用了:disabled='this.title==="查看"' 只要满足条件表单就不允许编辑

风口上的吱吱鼠
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue动态生成下拉框_使用Vue动态生成form表单
weixin_39861920的博客
12-19 1504
form-create 表单生成器具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。如果对您有帮助，您可以在Github点右上角 "Star" 支持一下 谢谢！示例1.2 版本重大更新内部结构优化新增 规则生成器$formCreat...
vue 动态表单开发方法案例详解
10-15
在案例中，`permission.main`用于控制表单元素的可读写状态。 3. **数据结构** 后端生成的表单模板通常包括数据结构，如`formulas_2400000001371061`、`dateCalcs_2400000001371061`和`validRule_2400000001371061...
web前端-vue中设置el-form-item是否可编辑
MinggeQingchun的博客
12-08 8142
设置el-input，textarea只读方法，使显示的文本内容不允许变更。此时，可通过页面限制防止用户修改 方法：添加readonly="true" 或者:disabled="true" 均可实现。代码示例如下所示： <el-form-item label="用户：" :label-width="formLabelWidth"> <el-input type="textarea" readonly="true" v-model="formData.benchmarkDe..
vue 将整个表单设置为只读_把整个页面中的内容设置成只读，不可编辑
热门推荐
weixin_39844963的博客
12-19 1万+
方法一：比较先进的方法是在body体内加个div，设置其style的index值最大，比如9999，结合css和div技术可以实现当前页面上浮一个透明层，这样用户就不能操作了。poweredbyxty_zyn你也可以在这里插入图片你想注册地图名片吗http://mc.mapabc.comEMAIL:lipeng@mapabc.com地址邮编方法二：比较彻底的方法，是遍历所有表单元素将其dis...
vue2和vue3自定义指令实现只读模式，禁止用户编辑
weixin_43601701的博客
06-04 426
你在工作时，是否遇到产品要求添加只读模式，需要大片的配置项都需要只读，代码层级深，改动内容多，全加上disable费事费力，期望简单的实现只读本文实现了一个只读指令，只需要在需要的地方加上v-read-only即可达到只读效果，快捷方便当前代码已经在使用中，效果良好。
vue+element 动态表格编辑
qq_45316181的博客
02-13 526
vue+element 动态可编辑表格
vue动态表单校验（校验切换）
weixin_43939111的博客
04-11 1965
比如某个统计表单有如下输入项：1、商品类型（下拉选择框）：A类、B类2、商品补货数量（输入框）：输入数字3、展牌数量（输入框，由商品类型决定是否必填该项）：输入1或以上整数现在要录入补货清单，要求：1、“商品类型”选择A类时，商品补货数量输入限制：100-300，展牌数量选填2、“商品类型”选择B类时，商品补货数量输入限制：1-10，展牌数量必填。
基于Vuetify的Vue动态表单编辑器及代码生成器
适己而忘人者，人之所弃；克己而立人者，众之所戴。
12-27 1427
简介 我是一个后端老炮，在做工作流服务时，深感动态表单的重要性。所以，慢慢摸索和学习，结合自己的需求，搭建了本套动态表单系统。 本系统是基于 lerna 和 yarn workspaces 构建的， monorepo 方式管理代码的项目（很喜欢这种方式，和 Maven 的模块化工程一样，最主要是不用每个项目一堆 node_modules） 基于 Vue 2.0 和 Vuetify 2.3.XX 构建。没有使用 Vue3，主要是 Vuetify 3 还在开发中。 共性组件采用 rollup 进行编译，并且.
vue + element 动态表单部分无法校验问题
weixin_41652495的博客
12-06 1199
element的动态表单校验失效解决
vue动态控制table表格列数
蓝_蓝的博客
08-25 1584
vue动态控制table表格列数
java 表单套打编辑器,基于Vuetify的Vue动态表单编辑器及代码生成器
weixin_39661589的博客
03-11 382
预览1. 总览2. ICON 和 COLOR 设置展示3. RULE 设置展示简介在做工作流服务时，深感动态表单的重要性。所以，慢慢摸索和学习，结合自己的需求，搭建了本套动态表单系统。本系统是基于 lerna 和 yarn workspaces 构建的， monorepo 方式管理代码的项目(很喜欢这种方式，和 Maven 的模块化工程一样，最主要是不用每个项目一堆 node_modules)基于...
vue+element 模态框表格形式的可编辑表单实现
10-16
在本例中，我们将探讨如何利用Vue和Element UI来实现一个模态框内的表格形式的可编辑表单。 首先，模态框（Modal）是Element UI中的一个组件，它通常用于展示临时信息或者进行一些操作确认。通过`:visible.sync`...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在Vue.js应用中，我们经常需要处理添加和编辑数据的功能，而这些操作通常会使用到同一个表单。在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑...
vue实现在线简历编辑器(在线网页编辑)
06-10
在本项目中，我们主要探讨如何使用Vue.js框架来实现一个在线简历编辑器，这是一个能够帮助用户在线创建、编辑和定制个人简历的Web应用程序。Vue.js是一个轻量级且功能强大的JavaScript前端框架，它提供了丰富的组件...
vue2 中如何实现动态表单增删改查实例
08-30
我们可以使用v-model来绑定表单的值，使用v-for来循环表单，使用v-if来控制表单的显示和隐藏等。 在vue2中实现动态表单增删改查实例需要使用Vue的双向绑定，使用jinjia2来引入Vue项目，使用Vue.component来定义组件...
输入框输入值之后，检索表格中是否存在输入框中的值，存在就让当前文字为红色
weixin_46631078的博客
07-05 437
span v-html="createKeywordHtml_content(scope.row.date)">日期this.searchValue为输入框的值。
Vue的学习之class与style绑定
最新发布
人生苦短
07-07 256
本节对class与style的绑定内容就学习完毕了！
Vue的学习之数据与方法
人生苦短
07-06 517
前段期间，由于入职原因没有学习，现在已经正式入职啦，接下来继续加油学习。
vue2+bootstrap弹窗可编辑表单
06-13
同样地，我们可以在Vue2项目中使用Bootstrap弹窗来实现可编辑表单的功能。以下是一个简单的示例： ``` <template> <div> <!-- 弹窗按钮 --> <button type="button" class="btn btn-primary" @click="openModal">打开弹窗</button> <!-- 弹窗 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">{{ title }}</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="closeModal"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="inputName">姓名</label> <input type="text" class="form-control" id="inputName" placeholder="请输入姓名" v-model="name"> </div> <div class="form-group"> <label for="inputEmail">邮箱</label> <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱" v-model="email"> </div> <div class="form-group"> <label for="inputPassword">密码</label> <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码" v-model="password"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" @click="closeModal">关闭</button> <button type="button" class="btn btn-primary" @click="saveData">保存</button> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { title: '编辑表单', name: '', email: '', password: '' } }, methods: { openModal() { $('#myModal').modal('show'); }, closeModal() { $('#myModal').modal('hide'); }, saveData() { // 在这里处理保存数据的逻辑 this.closeModal(); } } } </script> ``` 在上面的示例中，我们使用了Bootstrap的modal组件来实现弹窗的功能。在Vue组件中，我们可以通过点击按钮来打开弹窗，并在弹窗中嵌入一个表单。表单的各个输入框使用v-model指令来绑定数据，在保存数据时，我们可以在saveData方法中编写逻辑来处理数据的保存。 需要注意的是，为了在Vue中使用jQuery来控制Bootstrap组件，我们需要在项目中引入jQuery和Bootstrap的相关JS文件。可以在Vue项目的public/index.html文件中引入这些文件： ``` <!DOCTYPE html> <html> <head> ... </head> <body> <div id="app"></div> <!-- 引入jQuery和Bootstrap的JS文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> <script src="/js/app.js"></script> </body> </html> ``` 在上面的示例中，我们使用的是Bootstrap 4版本的JS文件，如果你使用的是其他版本的Bootstrap，请相应地修改引入的JS文件的路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值