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

如题所述

第1个回答  2022-06-05

在我们使用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。)

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

https://blog.csdn.net/weixin_43970743/article/details/88532307

如果 v-model 是二级字段,而js中又设置了默认选择项,则点击无反应。
解决办法:
v-model绑定的值改成一级对象。

请求接口数据赋值后,页面上input框正常显示,值也是对的,但是不可编辑。
解决办法:
使用vue的全局api方法,this.$set(data, property, value)

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

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

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

全局设置

......