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循环，换汤不换药，重点是一样的。 希望对大家有帮助。我也是一个小菜，有问题欢迎大家留言。必回复。

<template>
    <div class="g15Editor">

        <div style="margin:18px 24px 0px;background:white;">

            <el-form
                label-width="auto"
                :model="ruleForm"
                ref="ruleForm"
                label-position="left"
                :inline="true"
                style="width:100% !important;">

                <el-table class="tenderPriceTable" border :empty-text="loadText" :data="ruleForm.tenderPriceList" style="width: 100%;text-align:center">

                    <el-table-column show-overflow-tooltip label="序号" type="index" style="text-align:center" width="50px" fixed></el-table-column>

                    <el-table-column show-overflow-tooltip label="投标单位" min-width="120px">
                        <template slot-scope="scope">
                            <span>{{ scope.row.tenderUnit ? scope.row.tenderUnit : '-' }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column show-overflow-tooltip label="投标价格(元)" min-width="150px">
                        <template slot-scope="scope">

                            <el-form-item :prop="'tenderPriceList.'+scope.$index+'.tenderPrice'" :rules="ruleFormCheck.listTenderPrice">
                                <el-input v-model="ruleForm.tenderPriceList[scope.$index].tenderPrice" placeholder="请填写投标价格"></el-input>
                            </el-form-item>

                        </template>
                    </el-table-column>

                </el-table>

            </el-form>
        </div>

        <el-button style="margin-top:16px; margin-left:200px;" type="primary" @click="checkAction">点我检查数据</el-button>

    </div>
</template>

<script>

export default {

    components: {
    },

    data () {
        return {

            loadText: '暂无数据',

            ruleForm: {
                tenderPriceList: [],
            },

            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'],
                    },
                ],

            },

        };
    },

    props: {
    },

    watch: {
    },

    created () {

    },

    mounted () {
        // 为列表添加数据
        for (var i = 0; i < 12; i++) {
            var tenderPriceObj = {};
            tenderPriceObj.tenderUnit = 'tenderUnit' + i;
            tenderPriceObj.tenderPrice = 100 + i * 4;
            this.ruleForm.tenderPriceList.push(tenderPriceObj);
        }
    },

    methods: {
        checkAction () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    console.log('校验成功');
                } else {
                    console.log('还有数据未填写');
                }
                return false;
            });
        },
    },
};

</script>

<style>

.g15Editor {
    background-color: #f0f2f5;
    height: 100% !important;
    width: 100%;
}

</style>