element-ui 1.4.13

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>