elementui里如何为动态表格添加数字最大规则

Question

项目中需要用到动态表格（一行三列），但是需要对这三列做验证，其中有一列需要用到 el-input-number，本来这个控件有最大限制参数max，但是需求觉得体验不好，输入大于最大限制数，会自动改为最大限制数，希望可以不自动改变，而是给与提示，由用户手动修改，代码如下：

<el-table-column prop="Number" label="数量">
    <template slot-scope="scope">
        <el-form-item :prop="'formObj.' + scope.$index + '.Number'"
            :rules="[
                { required: true, message: '数量不能为空', trigger: 'blur' },
                { max: 3, message: '数量最大为999' },
            ]"
        >
            <el-input-number v-model="scope.row.Number"></el-input-number>
        </el-form-item>
    </template>
</el-table-column>

如上办法行不通，可能是因为控件把数据转换为数字类型了，而max是对字符校验的，所以不管输入几位数字都会报错，于是我又换了一种方式（如果我能得到准确的数字，可以通过代码动态验证）：

{ max: 3, message: '数量最大为999' } 换成 { validator: validateNumber },

methods: {
    validateNumber(rule,value,callback) {
        debugger
    },
}

如此也有问题：validateNumber的value参数得到的永远是1（默认值），不论如何修改 Number，

最终将 el-input-number 控件换成 el-input 才行，可能还是由于数据类型的关系。

怎么才能使用 el-input-number而且能给出（数字最大）验证提示呢？

Answer 1

element-ui 对 el-input-number 的封装是基于 type=text 的，所以实际上它得到的是一个字符串类型的值，在组件内做了数值转换，async-validator 本身是支持数值的校验，但似乎是因为这种封装而不起作用。自定义的校验规则还是可以的，不晓得楼主说的永远只拿到 1 是不是因为你期望输入的时候就校验，但实际上要失焦的时候再会触发校验：
https://codepen.io/jylzs369/p...

Answer 2

所以我不太爱用这些“比基础控件强一点点的控件”，带来的麻烦未必有解决的问题多。

我也不知道如何让 el-input-number 支持你想要的效果，我的建议是，按照 el 的规范写一个独立控件，或者，直接写一个能满足需求的控件。