el-form-item隐藏,el form item隐藏

http://www.itjxue.com  2023-01-15 03:54  来源:未知  点击次数: 

Ext 文本框隐藏

晕 你是想让整个框加左边的字全部隐藏啊

如果是隐藏表单 就是说从头到尾都不显示 只记录值的话 那么就直接用

Ext.form.Hidden对象啊 xtype:对应的是 hidden

文本框 xtype:对应的是textfield

如果你想根据js来控制是否隐藏 直接取得这个文本框调hide()方法只能隐藏掉框 而框左边的字是隐藏不掉的

所以你要取这个输入框所属布局的组件 使用hide()方法 才行。

Element-ui关于form表单的踩坑

使用 v-if条件渲染el-form-item组件,并需要切换不用表单项时,需要在el-form-item组件上添加唯一的key属性值,防止切换后,新的el-form-item组件仍然显示切换前的表单错误验证提示

表单组件el-form封装后放在el-dialog组件内时,切换显示隐藏弹窗时,可以在封装的form组件上加上v-if并绑定el-dialog显示隐藏的布尔值,可以在el-dialog隐藏时同时销毁form组件,可以避免表单项及验证错误提示清除不完全的困扰(el-dialog组件的destroy-on-close属性有bug不起作用)。

初始化用v-model绑定在el-form上的表单数据时,最好放在created钩子函数里对表单数据复制,放在mounted里会触发change事件,从而会引起表单验证规则触发。

vue中el-form-item是什么

vue中el-form-item意思是表单的数据对象。表单里面的每一项是放在el-form-item标签里面,放入想渲染出来的组件,如输入框,单选等。

elementui表格如何用v-show

经常使用v-if来让el-form-item表单元素显示隐藏,因为之前使用v-show会导致rules判断错误,隐藏着的元素也加入rules的判断中去,导致没有办法正常提交,所以基本使用的v-if来控制el-form-item。

后来考虑这种不停切换选择来让el-form-item显示和隐藏的使用v-show更合适,就找了一种办法在使用v-show的情况下同样可以让rules正常判断。

先看下v-if的使用情况,这个大家都能正常使用。

el-form-item v-if="form.a == 1" label="xxx" prop="abc"

el-input v-model="form.abc" /

/el-form-item

rules: {

abc: [{ required: true, message: "请输入xxx", trigger: "blur" }]

}

登录后复制

这种情况下我们在提交代码的时候如果v-if判断为false,el-form-item就没有这一项,rules也不会去检测,this.$refs[“form”].validate(valid = { 这里判断valid为true是正常可以通过的 })。

但是我们使用v-show会是另一种情况

el-form-item v-show="form.a == 1" label="xxx" prop="abc"

el-input v-model="form.abc" /

/el-form-item

rules: {

abc: [{ required: true, message: "请输入xxx", trigger: "blur" }]

}

登录后复制

这种情况this.$refs[“form”].validate(valid = { 这里判断valid为false }),因为form.abc为空,没能通过判断,究其原因是v-show的时候el-form-item只是display:none隐藏掉了,但是这一项还是会加入到rules的判断中导致我们再提交时发生错误,那么怎么才能使用v-show同时又可以正常提交呢

el-form-item v-show="form.a == 1" label="xxx" prop="abc"

:rules="{required: form.a == 1 ? true : false, message: 'yi', trigger: 'blur'}"

el-input v-model="form.abc" /

/el-form-item

// 这种情况下abc就不用固定加入rules中去了

登录后复制

这样,在form.a == 1的时候既可以让form.abc元素显示出来,又让他的rules设置为true必须,当form.a不为1的时候让form.abc隐藏了起来,同时rules又设置为了flase不必须,这样我们在提交的时候就可以让this.$refs[“form”].validate(valid = { })作出正常的判断了,同时使用的v-show来控制元素的显示隐藏,节省了消耗还可以频繁地切换

element-Ui 问题记录(个人笔记)

在我们使用element进行开发的时候,有时会出现一些奇怪的问题,这些问题有可能是框架本身的缺陷,也有可能是我们使用不当,遂将在开发过程中遇到的问题和值得记录下来的东西,做一个集合,方便以后参考。

在子组件直接点击关闭时会导致报错(单向数据流问题)。解决方法就是在父组件操作关闭事件,并用第三个变量来控制显示与隐藏。并在visible后加.sync。

ElementUI Form表单验证不通过,明明有值, 验证的错误信息不消失。

注意的点:

用props属性来配置成和后台数据一样的字段。

1、检查是否赋值成功;

2、赋值成功后检查拿到的数据是否与下拉列表数据id相匹配(可能后端先随便写的)

注意:1.v-model绑定的值格式为 [12,23,34] 这种格式,如果不是需要进行处理。2.检查返回id数组与下拉框列表中的数据是否有匹配,如果不匹配则显示不了文字。

[Vue warn]: transition-group children must be keyed: ElTag报错

在 保证绑定的数据类型与后台数据类型一致 的情况下,还出现以上报错,可能有以下原因:

勾选时默认获取到的节点是不包括半选状态的,所以我们前端传过去之后往往返回的也不包括半选状态的,所以反显的时候不正确。处理方法如下:

解决方案:

1.设置check-strictly

checkStrictly是一个变量,默认值是false

2.拿到接口数据后:

去除单选按钮里的数字,只需添加空格标签 nbsp; 就行了。

解决方法:设置为具体的数值或百分比。( 注:每一个el-form-item可以设置单独的label-wodth。)

我们直接绑定一个事件的时候,事件默认有一个参数,但是我们想传第二个参数的时候,需要怎么传,以下就是解决方法:

如果 v-model 是二级字段,而js中又设置了默认选择项,则点击无反应。

解决办法:

v-model绑定的值改成一级对象。

请求接口数据赋值后,页面上input框正常显示,值也是对的,但是不可编辑。

解决办法:

使用vue的全局api方法,this.$set(data, property, value)

在每次弹出对话框的时候深拷贝一次当前行数据的副本

在一些用户注册场景中,提交整个表单前有时候我们会做一些单独字段的校验,例如发送手机验证码,发送时我们只需要校验手机号码这个字段,可以这样做:

如果需要多个参数,将参数改为数组形式即可。

全局设置

......

在软件开发中formelement列表怎么设置隐藏

选项value_options用于多值元素(multicheckbox,选择简单的元素,等等),隐藏的只是设置value属性,

例如,

试图把价值7的表单字段隐藏:

$this-add(array(

'type'

=

'Zend\Form\Element\Hidden',

'name'

=

'id',

'

attributes

'

=

array(

'value'

=

7,

),

));

(责任编辑:IT教学网)

更多

推荐思科认证文章