element-ui中常见的一些坑

一：el-input type=number 输入中文，焦点上移

当 el-input 设置 type="number" 时，输入中文，虽然中文不会显示出来，但焦点会上移。

解决办法：

<style scoped>\
::v-deep .el-input__inner {\
line-height: 1px !important;\
}\
</style>

二：el-form 只校验表单其中一个字段

​有时候我们需要单独校验一些字段，比如发送验证码，单独对手机号进行校验，可以这样做：

this.$refs.form.validateField('name', valid => {\
if (valid) {\
console.log('send!');\
} else {\
console.log('error send!');\
return false;\
}\
})

三：el-dialog 重新打开弹窗，清除表单信息

​有人会在打开弹窗时，在$nextTick里重置表单，而我选择在关闭弹窗后进行重置：

<el-dialog @closed="resetForm">\
<el-form ref="form">\
</el-form>\
</el-dialog>\
\
<script>\
export default {\
methods: {\
resetForm() {\
this.$refs.form.resetFields()\
}\
}\
}\
</script>

四：el-dialog 的 destroy-on-close 属性设置无效

destroy-on-close 设置为 true 后发现弹窗关闭后 DOM 元素仍在，没有被销毁。

解决办法：在 el-dialog 上添加 v-if。

<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>\
</el-dialog>

今天的更新就到这里了，文章每天持续更新，希望对你有帮助！！