Form 表单

rules
- 表单校验函数需要访问实例中的属性时应该把校验规则写为computed，校验函数写入methods

<el-form-item prop="taxableIncome" :rules="taxableIncomeRules">

    <el-input v-model="formData.taxableIncome"></el-input>

</el-form-item>

computed:{

    taxableIncomeRules() {

        return [{

            trigger: 'blur', validator: this.taxableIncomeValidator

        }, {

            trigger: 'blur', required: true, message: '应缴税所得额不能为空'

        }]

    },

},

methods: {

    taxableIncomeValidator (rule, value, callback) {

        try {

            value = new Decimal(value)

            if (value.decimalPlaces() > 2) {

                callback('应缴税所得额不能超过2位小数')

            }

            if (value.lessThan(0)) {

                callback('应缴税所得额不能小于0')

            }

            callback()

        } catch (error) {

            callback('应缴税所得额必须为数值')

        }

    }

}

prop
- prop实际传入的是el-form中model绑定对象下属性的路径。在嵌入表格的表单项中相当有用

data(){

    return {

        data:[]

    }

}

<el-form :model="tableData" label-width="0px">

    <el-table :props="tableData">

        <el-table-column label="应缴税所得额">

            <template scope="scope">

                <!-- 这里的prop绑定了一个路径 -->

                <el-form-item :prop="`data[${scope.$index}].taxableIncome`">

                    <el-input v-model="tableData.data[scope.$index].taxableIncome"></el-input>

                </el-form-item>

            </template>

        </el-table-column>

    </el-table>

</el-form>

巴特西

element-ui 1.4.13

Form 表单

最新文章

热门文章