vue element-ui el-form表单验证表单验证，数值输入验证踩坑

1、官网介绍表单验证使用https://element.faas.ele.me/#/zh-CN/component/form#biao-dan-yan-zheng

2、所遇到的问题，当字段是数字类型的时候，输入input后，验证不通过

原因是

el-input默认值的类型是字符串类型

输入即使是数字，也被el-input 自己处理成了字符换数字。

3、解决办法

<el-form-item class="base_block" label="渠道号" prop="channelId" label-width="40%">
         <el-input type='number' class="el_input_box" v-model.number="channel.baseConfDetail.channelId" :disabled="!isEdit"/>
</el-form-item>

设置

type='number'

此外，注意

v-model 需要更改为 v-model.number 否则同样验证不通过

4、当input 设置成number类型后，出在输入框末尾出现数值操作加减图标

css:

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }

可以解决该问题，让显示正常