elementUI使用问题
# 1、el-input无法输入的问题
原因分析:
1、el-form标签下的层级结构不统一 比如有el-form下面有的行加上了el-row,有的没有加上el-row,可能会导致输入框的内容无法输入。也就是要保证el-form-item上面的层级是一致的。
2、页面加载的时候,未在data进行定义(会出现第一次输入无用,点击其他地方的时候显示) 主要是保证输入框绑定的值在data中提前定义好,或者调用$set 进行数据的双向绑定。
##/2、element-ui 的el-form的问题(回车默认提交) element-ui的el-form的中如果只有一个input框,当按下enter键时,会默认出发提交事件,刷新页面。
解决办法:在el-form中加入@submit.native.prevent 来使提交后不刷新页面,从而解决这个问题
<el-form :model="test" size="mini" label-width=“70px” @submit.native.prevent>
.........
</el-form>
# 3、el-form校验问题
校验时发现就算输入框中有值,依旧会出现红色提示,无法校验成功。
解决办法:需要保证model内的对象初始化时,有需要校验的参数。并且要保证prop值正确
data(){
return{
submitData:{
checkMan:'',
}
}
}
# 4、封装下拉框传参问题
封装element的下拉框时,发现将value的类型指定为String时,开启多选时会报错,指定Object时,单选时也会报错。
解决办法:prop传参应该设置为:value:[Array,String],避免获取不到想要的值
# 5、el-input绑定点击事件
1、在使用的时候,如果给整个输入框绑定一个点击事件,但是这个输入框不是必填,就会导致选择之后,无法删除
解决方案:单独给input框的图标绑定点击事件,不对整个输入框绑定点击事件。
2、type=number的时候,清除按钮会和数字增加的按钮重合
解决方案:使用suffix插槽,单独处理