Vue-form表单动态绑定值

效果图：

image.gif

一般绑定：1、el-form的model 与其子项 中v-model的值一一对应，2、prop中的值与 rules中的值一一对应。

动态绑定：1、prop要改成:prop进行绑定，

例：:prop="'tenderPriceList.'+scope.$index+'.tenderPrice'"

其中第一个参数为被循环的数组的名称，第二个参数为当前循环的下标，第三个参数为数组中对应的字段名称。 划重点：数组名称、下标值后边都有一个小数点。
2、rules中的检验规则只需要一个就OK，在el-form-item中进行一对一绑定，都绑定为同一个值

例：:rules="ruleFormCheck.listTenderPrice"
rules中的定义为：
ruleFormCheck: {

                listTenderPrice: [
                    {
                        validator: (rule, value, callback) => {
                            if (!value || value == null || value.length == 0 || value == undefined) {
                                callback(new Error('请填写填写投标价格'));
                                return;
                            }
                            var p = value.toString().replace(/,/g, '');
                            if (/(^\d{0,15}$)|(^\d{0,15}\.\d{0,2}$)/.test(p) == false) {
                                callback(new Error('整数长度在1-15位且只能保存两位小数'));
                                return;
                            }
                            if (/((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/.test(p) == false) {
                                callback(new Error('金额只能输入数字且小数点后只能保存两位'));
                                return;
                            }
                            callback();
                        },
                        trigger: ['blur', 'change'],
                    },
                ],

            },

下边是完整的代码，我是写在一个table中的。 当然可以换成for循环，换汤不换药，重点是一样的。 希望对大家有帮助。我也是一个小菜，有问题欢迎大家留言。必回复。