怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
Vue 设置 怎样 隐藏 Form el 输入框 item
2023-09-14 09:07:25 时间
1、如何在前端vue中隐藏某一个元素(el-form-item怎样隐藏)
给每项表单项添加一个自己的id名,并用v-model绑定相对应的数据,利用v-if根据上一个表单项的数据值来进行显示或隐藏
<el-form-item id="ShowOrHide" v-mode="showEl" v-if="showEl==true" label="编号" type="hidden" prop="user_id">
<el-input v-model="ruleForm.user_id"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
return {
//是否展示id
showEl:false
}
2、效果
3、设置form表单为只能读、不能修改
在input标签中使用 readonly='true'
<el-form-item label="姓名" prop="name">
<el-input v-model="ruleForm.name" readonly='true'></el-input>
</el-form-item>
相关文章
- 使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式
- VUE - 路由跳转时设置动画效果
- [Typescript] 88. Hard - Simple Vue
- [Vue] Parent and Child component communcation
- vue.js3: 安装使用vue-router(vue-router@4.0.16 / vue@3.2.37)
- vue+webpack开发(一)
- vue.config.js常用配置详解
- Vue命名规范
- [Vue @Component] Place Content in Components with Vue Slots
- django-vue-admin前端设置后台接口地址为127.0.0.1产生跨域问题解决办法
- How is syntax error in Vue detected - Vue的语法错误检查机制介绍
- vue 新版本 webpack 代理 跨域设置
- Vue设置全局的方法和样式
- Vue组件库新增的prop属性类型是Object或者Array时默认值的设置
- 145: vue+openlayers 根据坐标点数组值,绘制多边形,显示面积数
- 132:vue+openlayers: 设置显示图层的层级数zIndex (示例代码)
- 093:vue+openlayers设置zoom最大值和最小值 (示例代码)
- 080:vue+openlayers获取使用者当前的地理位置 (示例代码)
- 059:vue+openlayers点击选择feature,并设置特定的颜色(示例代码)
- vue或uniapp中文本框输入数字固定几位小数或只能输入整数的方法