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

qngyun1029
  • 741

项目中需要用到动态表格(一行三列),但是需要对这三列做验证,其中有一列需要用到 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
    },
}

如此也有问题:validateNumbervalue参数得到的永远是1(默认值),不论如何修改 Number

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

怎么才能使用 el-input-number而且能给出(数字最大)验证提示呢?

回复
阅读 2k
2 个回答
✓ 已被采纳

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

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

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

宣传栏